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 {

  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

user_40952 · Answer

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) {
       ...
     },
  ),
)

user_15258043 · Answer

You can achieve vertical slider by this [flutter_xlider 3.4.0]

Sample Code:

FlutterSlider(
  axis: Axis.vertical,
  values: [300],
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
);

Sample Output:

Hope this helps you or someone else

Vertical sliders in Flutter aligned side by side

3 Answers