Cách thêm thanh trượt phạm vi trong Flutter

Trong hướng dẫn này, chúng ta tìm hiểu cách thêm thanh trượt phạm vi cho hai giá trị bằng tiện ích RangeSlider trong Flutter. Thanh trượt phạm vi rất quan trọng đối với các thành phần như thanh trượt giá hoặc bất kỳ loại cấu hình phạm vi nào. 

Cách thêm RangeSlider trong 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;
        });
  }, 
)

Theo mặc định, phạm vi tối thiểu và tối đa sẽ là 0 đến 1, do đó bạn phải chuyển giá trị bắt đầu và kết thúc trong khoảng từ 0 đến 1. Nếu muốn có số lượng phạm vi lớn hơn thì bạn có thể đặt giá trị tối thiểu và tối đa của riêng mình như dưới:

Cách đặt tối thiểu và tối đa trên RangeSlider trong 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;
        });
  }, 
)

Bạn cũng có thể thêm phân chia khoảng thời gian trượt và nhãn cho các giá trị.

Cách đặt Phân chia khoảng thời gian và Laber trên 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;
        });
  }, 
)

Ví dụ ứng dụng đầy đủ:

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;
                          });
                    }, 
                  )
            ],)
          )
       );
  }
}

Bằng cách này, bạn có thể thêm thanh trượt Phạm vi trong ứng dụng Flutter.