Vertical sliders in Flutter aligned side by side

Question

I have these sliders which by default are obviously aligned underneath each other:

class _Grid extends State<Grid> {

  var val = 5;

  @override
  build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Game"),
        backgroundColor: Colors.red,
        elevation: 1.0,
      ),
      body: new Container(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Slider(
              value: val.toDouble(),
              min: 1.0,
              max: 50.0,
              divisions: 50,
              label: '$val',
              onChanged: (double newValue) {
                setState(() {
                  val = newValue.round();
                });
              },
            ),
            new Slider(
              value: val.toDouble(),
              min: 1.0,
              max: 50.0,
              divisions: 50,
              label: '$val',
              onChanged: (double newValue) {
                setState(() {
                  val = newValue.round();
                });
              },
            ),    
          ],
         )
       ),
    );
  }
}

But instead of the user dragging the value from left to right, I want the value to be dragged from bottom to top (basically rotated). And they should align side by side.

How can I achieve this?

Thanks

Answer 1

Updated answer for 2019: simply wrapping a Slider inside a RotatedBox works like a charm now, no need for other libraries or adjustments:

RotatedBox(
  quarterTurns: 1,
  child: Slider(
     value: ...,
     onChanged: (newValue) {
       ...
     },
  ),
)

Answer 2

The slider component does not support switching the axis from horizontal to vertical. Google's Material Design guidelines on sliders do not show any examples of vertical sliders, so maybe it's something which is not recommended.

While you could technically rotate the sliders using a RotatedBox or the Transform class, that messes up the position calculation for the sliders. The slider class uses a HorizontalDragGestureRecognizer, so the thumb position change will be adjusted based on horizontal instead of vertical drags.

The following code example shows the problem. Sliders are rotated, but only finger movements on the horizontal axis will update the scrollthumb position:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Vertical sliders',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SliderGrid(),
    );
  }
}

class SliderGrid extends StatefulWidget {
  @override
  _GridState createState() => new _GridState();
}

class _GridState extends State<SliderGrid> {
  var val = 5;

  @override
  build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Game"),
        backgroundColor: Colors.red,
        elevation: 1.0,
      ),
      body: new Container(
        child: new Transform(
          alignment: FractionalOffset.center,
          // Rotate sliders by 90 degrees
          transform: new Matrix4.identity()..rotateZ(90 * 3.1415927 / 180),
            child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              new Slider(
                value: val.toDouble(),
                min: 1.0,
                max: 50.0,
                divisions: 50,
                label: '$val',
                onChanged: (double newValue) {
                  setState(() {
                    val = newValue.round();
                  });
                },
              ),
              new Slider(
                value: val.toDouble(),
                min: 1.0,
                max: 50.0,
                divisions: 50,
                label: '$val',
                onChanged: (double newValue) {
                  setState(() {
                    val = newValue.round();
                  });
                },
              ),
            ],
          ),

        ),
      ),
    );
  }
}

That leaves you with the option to create a vertical slider implementation based on the current slider code base. Copy-paste the content of slider.dart into a new file in your project and import it. In that file, replace all instances of HorizontalDragGestureRecognizer with VerticalDragGestureRecognizer. In combination with the rotation code above, it should now handle gestures properly.

I haven't found any open Flutter issues filed to create a vertical slider, looks like there is no plan to create one right now.

Update: Created Flutter issue to add support for vertical sliders.