Flutter Slider
A slider is a widget that allows you to choose a value from a given range in the app. We can scroll through the values and pick the one we want. To implement a slider, we don’t need to install any dependencies.
Instead of selecting a single number, we may select a continuous range of values from a given range with a Range Slider.
Slider
Simply use the slider widget and provide the range values to build the slider widget. This widget requires two parameters:
- value: When the app is launched, we must pass the default value, which must be of type double.
- onChanged: When the slider value is changed, this function is called, and we get a double value that we may utilise for further processing.
Example
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyState createState() {
return _MyState();
}
}
class _MyState extends State<MyApp> {
bool _value = false;
double val = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("Learn Code Zone"),
),
body: Container(
height: 100,
child: Slider(
value: val,
onChanged: (value) {
setState(() {
val = value;
});
},
))));
}
}
RangeSlider
RangeSlider is a widget that is used to implement the RangeSlider widget. This widget requires two parameters:
- values: The RangeValues kind of data, which has a start and an end, must be passed here.
- onChanged: This function is called anytime the range values are modified and a RangeValue value is returned.
Example
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyState createState() {
return _MyState();
}
}
class _MyState extends State<MyApp> {
bool _value = false;
double val = 1;
RangeValues values = RangeValues(1, 100);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("Learn Code Zone"),
),
body: Container(
height: 100,
child: RangeSlider(
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
min: 1,
max: 100,
values: values,
onChanged: (values) {
setState(() {
values = values;
});
}),
)));
}
}
