Vertical Slider in Flutter

You’re probably familiar with regular ol’ sliders that move from side to side. But what about vertical sliders? They’re sliders that slider from top to bottom, right?

Well, sort of. Vertical sliders, also known as vertical transitions, have become a popular design trend in recent years as designed look for new ways to display content. From fullwidth and full screen vertical page slides to split-screen shifts complete with micro interactions, vertical sliders can add visual oomph to an otherwise boring, static website.

In this post, I’ll introduce you to vertical sliders and show you some pretty cool examples that you can create.

import 'package:flutter/material.dart';

void main() => runApp(MakeMyPractice());

class MakeMyPractice extends StatefulWidget {
  @override
  _MakeMyPracticeState createState() => _MakeMyPracticeState();
}

class _MakeMyPracticeState extends State<MakeMyPractice> {
  double _value = 0; //slider value

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              Slider(
                min: 0,
                max: 100,
                value: _value,
                onChanged: (value) {
                  setState(() {
                    _value = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}