Slider in Bottom Sheet
Slider in Bottom Sheet

Hi Guys, Welcome to Proto Coders Point. In this flutter tutorial, will learn how to implement range slider in bottom sheet of flutter app.

Flutter Slider

In fluttter a slider is a widget of material design that is used to set a range value, So basically slider widget in flutter is used as input widget by which user can simply drag the slider point to select the range value.

I have already wrote a complete article on Slider flutter where i have explained it in details



Range Slider in flutter Bottom Sheet

This article is only on “How to use range slider in bottom sheet flutter”.

Video Tutorial

Complete Code: main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double height = 180;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Sheet with slider"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Height: ${height}", style: TextStyle(fontSize: 30),),
            ElevatedButton(
              onPressed: (){
                 showModalBottomSheet(context: context,
                     builder: (BuildContext context){
                       return Container(
                         height: 200,
                         child: Center(child:
                         StatefulBuilder(
                           builder: (context,state){
                             return Center(
                               child: Slider(
                                 value: height.toDouble(),
                                 max: 200,
                                 min: 50,
                                 onChanged: (double value) {
                                   state(() {
                                     height = value.round() as double;
                                   });
                                   setState(() {

                                   });
                                 },

                               ),
                             );
                           },
                         ),
                         ),
                       );
                     }
                 );
              },
              child: Text(" Select Height "),
            ),
          ],
        ),
      ),
    );
  }
}

Output

flutter show model bottom sheet

In above code, we have 2 widget Text & Elevated.

Text Widget will simple show there ranger value from range slider.

Elevated Button when pressed, will show model bottom sheet flutter.

Inside showModelBottomSheet popup, we are showing a slider where user can select the range. The same selected range value is show in Text Widget.

Flutter slider not moving / updating

Flutter show model bottom sheet is not a stateful widget that is the reason the widget inside it will not update, In our case slider is not moving even after setState() is called from bottom sheet will not rebuild.

Here is the solution

As you can see in above code, Slider widget is been wrapped with StatefulBuilder Widegt, that will have it own setState() to update/rebuild it child on change.

                         StatefulBuilder(
                           builder: (context,state){
                             return Center(
                               child: Slider(
                                 value: height.toDouble(),
                                 max: 200,
                                 min: 50,
                                 onChanged: (double value) {
                                  // rebuild this statefulbuilder
                                   state(() {
                                     height = value.round() as double;
                                   });
                                   setState(() {
                                    // this will rebuild the main 
                                   });
                                 },

                               ),
                             );
                           },
                         ),