Como adicionar controle deslizante de intervalo no Flutter

Neste tutorial, aprendemos como adicionar um controle deslizante de intervalo para dois valores com o widget RangeSlider no Flutter. O controle deslizante de intervalo é importante para componentes como controle deslizante de preço ou qualquer tipo de configuração de intervalo. 

Como adicionar RangeSlider no Flutter:

double startval = 0, endval = 0.5;
//iniital value for start range and end range

RangeSlider(
  //by default, min-max: 0-1
  values: RangeValues(startval, endval), 
  onChanged: (RangeValues value) {  
        setState(() {
            startval = value.start;
            endval = value.end;
        });
  }, 
)

Por padrão, o intervalo mínimo e máximo será de 0 a 1, então você deve passar o valor inicial e final entre 0 e 1. Se quiser um número maior de intervalos, você pode definir seus próprios valores mínimo e máximo, como abaixo:

Como definir mínimo e máximo no RangeSlider no Flutter:

//iniital value for start range and end range
double startval1 = 20, endval1 = 70;

RangeSlider(
  min: 0, 
  max: 100,
  values: RangeValues(startval1, endval1), 
  onChanged: (RangeValues value) {  
        setState(() {
            startval1 = value.start;
            endval1 = value.end;
        });
  }, 
)

Você também pode adicionar divisão de intervalo de slide e rótulo para valores.

Como definir divisão de intervalo e Laber no RangeSlider:

//iniital value for start range and end range
double startval1 = 20, endval1 = 70;

RangeSlider(
  min: 0, 
  max: 100,
  divisions: 10, //slide interval
  labels: RangeLabels("Rs. $startval1", "Rs. $endval1"),
  values: RangeValues(startval1, endval1), 
  onChanged: (RangeValues value) {  
        setState(() {
            startval1 = value.start;
            endval1 = value.end;
        });
  }, 
)

Exemplo completo de aplicativo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
  double startval = 0, endval = 0.5;
  //iniital value for start range and end range
  double startval1 = 20, endval1 = 70;
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("RangeSlider in Flutter"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [ 

                 Text("Start Value: $startval", style:TextStyle(fontSize: 20)), 
                 Text("End Value: $endval", style:TextStyle(fontSize: 20)), 

                 Text("Start Value1: $startval1", style:TextStyle(fontSize: 20)), 
                 Text("End Value1: $endval1", style:TextStyle(fontSize: 20)), 

                  RangeSlider(
                    //by default, min-max: 0-1
                    values: RangeValues(startval, endval), 
                    onChanged: (RangeValues value) {  
                          setState(() {
                              startval = value.start;
                              endval = value.end;
                          });
                    }, 
                  ),

                  Padding(padding: EdgeInsets.all(20)),

                  RangeSlider(
                    min: 0, 
                    max: 100,
                    divisions: 10, //slide interval
                    labels: RangeLabels("Rs. $startval1", "Rs. $endval1"),
                    values: RangeValues(startval1, endval1), 
                    onChanged: (RangeValues value) {  
                          setState(() {
                              startval1 = value.start;
                              endval1 = value.end;
                          });
                    }, 
                  )
            ],)
          )
       );
  }
}

Desta forma, você pode adicionar o controle deslizante Range no aplicativo Flutter.