controller property
RangeController?
controller
final
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;