How to make a Simple Slider in Flutter (No packages)

Pre-Requisites

1. A Flutter app (already boostrapped), that is all.

How it works:

Once we have the prerequisites installed, let’s proceed to the step-by-step process of creating a simple slider in Flutter without any libraries.

In case you’re on a bit of a deadline the full code is at the bottom with my custom text widget added.

Let’s start by creating a file called the slider.dart and in that file, go ahead and add a Scaffold and a parent widget like a Container, SizedBox or Column like so:

         Scaffold(
          backgroundColor: Colors.white,
          body: Column(
            children: [
              SizedBox(
                height: 30,
              ),
              TextWidget(text: 'Simple Slider in Flutter', fontSize: 24, fontWeight: FontWeight.bold),
              SizedBox(
                height: 30,
              ),
            // the slider will go here
            ]));

Now that we have a heading go ahead and create a SingleChildScrollView with a row as a bunch of containers

             SingleChildScrollView(
              // the scroll direction is set to horizontal so we can scroll from left to right
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.redAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '1',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.purpleAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '2',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.blueAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '3',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.brown,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '4',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.black54,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '5',
                        color: Colors.white,
                      )),
                    ),
                  ],
                ),
              )

Full Code:

Scaffold(
          backgroundColor: Colors.white,
          body: Column(
            children: [
              SizedBox(
                height: 30,
              ),
              TextWidget(text: 'Simple Slider in Flutter', fontSize: 24, fontWeight: FontWeight.bold),
              SizedBox(
                height: 30,
              ),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.redAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '1',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.purpleAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '2',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.blueAccent,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '3',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.brown,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '4',
                        color: Colors.white,
                      )),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      color: Colors.black54,
                      height: 150,
                      width: 150,
                      child: Center(
                          child: TextWidget(
                        text: '5',
                        color: Colors.white,
                      )),
                    ),
                  ],
                ),
              )
            ],
          ))

that is the full code: As a bonus here is the TextWidget custom component in case you would like to use one for your project too

enum TextCase {
  none,
  upper,
  lower,
}

class TextWidget extends StatelessWidget {
  final Color? color;
  final String text;
  final double letterSpacing;
  final double fontSize;
  final FontWeight fontWeight;
  final TextAlign textAlign;
  final TextCase textCase;
  final TextDecoration textDecoration;
  final FontStyle style;

  const TextWidget(
      {super.key,
      this.color = AppColorPalette.primary,
      required this.text,
      this.letterSpacing = 0.5,
      this.fontSize = 13,
      this.fontWeight = FontWeight.normal,
      this.textAlign = TextAlign.start,
      this.textCase = TextCase.none,
      this.textDecoration = TextDecoration.none,
      this.style = FontStyle.normal});

  @override
  Widget build(BuildContext context) {
    return Text(
      textCase == TextCase.upper
          ? text.toUpperCase()
          : textCase == TextCase.lower
              ? text.toLowerCase()
              : text,
      style: TextStyle(
        color: color,
        letterSpacing: letterSpacing, 
        decoration: textDecoration,
        fontSize: fontSize,
        fontWeight: fontWeight,
        fontStyle: FontStyle.normal,
      ),
      textAlign: textAlign,
    );
  }
}

And that is all.

Important tip: If you want to do this vertically, change the Row to a column and do not specify the scroll direction on the SingleChildScrollView.

Hope you found this helpful, feel free to leave any questions in the comment section. I will definitely get to them.