how to draw a line with two point in it in flutter - flutter

Question

I have two dropdown button that represt time (0-23) and the user can choose a time range for the light to be on. I want to represent the choosen times by a line like below where the the red circles move when they choose different time. it does not need to be circle, anything just to represent the range of time.
anyone have an idea or comments on that?

Answer 1

Use RangeSlider
One option is to use the RangeSlider in Flutter, to select an range of two values.
One caveat of the solution is that the range values are only visible while moving the thumb-selectors. Albeit you could use the callback function in the example to show the selected range elsewhere.
Example:
import 'package:flutter/material.dart';
// This StatefulWidget uses the Material RangeSlider and provides a
// callback for the updated range.
class SliderExample extends StatefulWidget {
const SliderExample({
Key? key,
required this.onRangeSelected,
required this.values
}) : super(key: key);
final RangeValues values;
final Function(RangeValues) onRangeSelected;
#override
State<SliderExample> createState() => _SliderExampleState();
}
class _SliderExampleState extends State<SliderExample> {
late RangeValues selectedRange;
#override
void initState() {
super.initState();
selectedRange = widget.values;
}
#override
Widget build(BuildContext context) {
return RangeSlider(
values: selectedRange,
onChanged: (range) {
setState(() {
selectedRange = range;
});
widget.onRangeSelected(range);
},
min: widget.values.start,
max: widget.values.end,
divisions: 24,
labels: RangeLabels("${selectedRange.start.round()}", "${selectedRange.end.round()}"),
);
}
}
// Using the SliderExample widget we just defined:
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SliderExample(
values: const RangeValues(0, 23),
onRangeSelected: (range) => print("${range.start} - ${range.end}"),
),
],
),
),
);
}
}
main() => runApp(const App());
Other approaches
Time Picker
However, you might want to consider using a time-picker instead if you want more fine-tuned control for the time: https://material.io/components/time-pickers/flutter#using-time-pickers

Answer 2

You can use RangeSlider Widget
https://api.flutter.dev/flutter/material/RangeSlider-class.html