controller property

RangeController? controller

Coordinates between SfRangeSelector and the widget which listens to it.

Built-in support for selection and zooming with SfChart.

Range controller contains start and end values.

start - represents the currently selected start value of the range selector. The start thumb of the range selector was drawn corresponding to this value.

end - represents the currently selected end value of the range selector. The end thumb of the range selector was drawn corresponding to this value.

start and end can be either double or DateTime.

Selection in SfChart.

class RangeSelectorPage extends StatefulWidget {
  const RangeSelectorPage({ Key key }) : super(key: key);
  @override
  _RangeSelectorPageState createState() => _RangeSelectorPageState();
}

class _RangeSelectorPageState extends State<RangeSelectorPage> {
 final double _min = 2.0;
 final double _max = 10.0;
 late RangeController _rangeController;
 SfRangeValues _values = SfRangeValues(4.0, 6.0);

@override
void initState() {
  super.initState();
    _rangeController = RangeController(
    start: _values.start,
    end: _values.end);
}

@override
void dispose() {
  _rangeController.dispose();
  super.dispose();
}

final List<Data> chartData = <Data>[
   Data(x:2.0, y: 2.2),
   Data(x:3.0, y: 3.4),
   Data(x:4.0, y: 2.8),
   Data(x:5.0, y: 1.6),
   Data(x:6.0, y: 2.3),
   Data(x:7.0, y: 2.5),
   Data(x:8.0, y: 2.9),
   Data(x:9.0, y: 3.8),
   Data(x:10.0, y: 3.7),
];

@override
Widget build(BuildContext context) {
 return MaterialApp(
     home: Scaffold(
         body: Center(
             child: SfRangeSelector(
                   min: _min,
                   max: _max,
                   interval: 1,
                   showTicks: true,
                   showLabels: true,
                  controller: _rangeController,
                   child: Container(
                   height: 130,
                  child: SfCartesianChart(
                       margin: const EdgeInsets.all(0),
                       primaryXAxis: NumericAxis(minimum: _min,
                           maximum: _max,
                           isVisible: false),
                       primaryYAxis: NumericAxis(isVisible: false),
                       plotAreaBorderWidth: 0,
                       series: <SplineAreaSeries<Data, double>>[
                           SplineAreaSeries<Data, double>(
                               selectionSettings: SelectionSettings(
                                   enable: true,
                                   selectionController: _rangeController),
                               color: Color.fromARGB(255, 126, 184, 253),
                               dataSource: chartData,
                               xValueMapper:
                                 (Data sales, int value) => sales.x,
                               yValueMapper:
                                 (Data sales, int value) => sales.y)
                            ],
                        ),
                    ),
                ),
            )
        )
    );
  }
}

Zooming in SfChart.

class RangeZoomingPage extends StatefulWidget {
  const RangeZoomingPage({ Key key }) : super(key: key);
  @override
  _RangeZoomingPageState createState() => _RangeZoomingPageState();
}

class _RangeZoomingPageState extends State<RangeZoomingPage> {
 final double _min = 2.0;
 final double _max = 10.0;
 SfRangeValues _values = SfRangeValues(4.0, 6.0);
 late RangeController _rangeController;

@override
void initState() {
  super.initState();
    _rangeController = RangeController(
    start: _values.start,
    end: _values.end);
}

@override
void dispose() {
  _rangeController.dispose();
  super.dispose();
}

final List<Data> chartData = <Data>[
   Data(x:2.0, y: 2.2),
   Data(x:3.0, y: 3.4),
   Data(x:4.0, y: 2.8),
   Data(x:5.0, y: 1.6),
   Data(x:6.0, y: 2.3),
   Data(x:7.0, y: 2.5),
   Data(x:8.0, y: 2.9),
   Data(x:9.0, y: 3.8),
   Data(x:10.0, y: 3.7),
];

@override
Widget build(BuildContext context) {
 return MaterialApp(
     home: Scaffold(
         body: Center(
             child: SfRangeSelector(
                   min: _min,
                   max: _max,
                   interval: 1,
                   showTicks: true,
                   showLabels: true,
                  controller: _rangeController,
                   child: Container(
                   height: 130,
                  child: SfCartesianChart(
                       margin: const EdgeInsets.all(0),
                       primaryXAxis: NumericAxis(minimum: _min,
                           maximum: _max,
                           isVisible: false,
                           rangeController: _rangeController),
                       primaryYAxis: NumericAxis(isVisible: false),
                       plotAreaBorderWidth: 0,
                       series: <SplineAreaSeries<Data, double>>[
                           SplineAreaSeries<Data, double>(
                               color: Color.fromARGB(255, 126, 184, 253),
                               dataSource: chartData,
                               xValueMapper:
                                 (Data sales, int value) => sales.x,
                               yValueMapper:
                                 (Data sales, int value) => sales.y)
                            ],
                        ),
                    ),
                ),
            )
        )
    );
  }
}

Implementation

final RangeController? controller;