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?

CodePudding user response：

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

CodePudding user response：

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