Getting Started with Flutter Range Selector (SfRangeSelector)

18 Nov 201824 minutes to read

This section explains the steps required to add the Flutter Range Selector widget and its elements such as numeric and date values, ticks, labels, and tooltips, covering only the basic features needed to get started with the Syncfusion® Flutter Range Selector.

To get started quickly with our Flutter Range Selector widget, you can check out this video.

Add Flutter Range Selector to an application

Create a simple project using the instructions given in the Getting Started with your first Flutter app documentation.

Add dependency

Add the Syncfusion® Flutter Range Selector dependency to your pubspec.yaml file.

DART

dependencies:

syncfusion_flutter_sliders: ^xx.x.xx

NOTE

Here xx.x.xx denotes the current version of Syncfusion Flutter Sliders package.

Get packages

Run the following command to get the required packages.

DART

flutter pub get

Import package

Import the following package in your Dart code.

DART

import 'package:syncfusion_flutter_sliders/sliders.dart';

Initialize Range Selector

After importing the package, initialize the Flutter Range Selector widget as a child of any widget. Here, the Range Selector widget is added as a child of the Container widget. The default values of the min and max properties of the SfRangeSelector are 0.0 and 1.0 respectively. So, the initialValues property must be given within the range. You can add any kind of widget as a child of the Flutter Range Selector. Here, Chart widget is added as a child.

IMPORTANT

You need to set the controller property to update Range Selector thumb values dynamically. Refer this link for setting controller property. The initialValues property can be used to set values at load time.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final DateTime x;
  final double y;
}

class GettingStartedInitializeSample extends StatelessWidget {
  final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7);

  final List<Data> _chartData = <Data>[
    Data(x: DateTime(2003, 01, 01), y: 3.4),
    Data(x: DateTime(2004, 01, 01), y: 2.8),
    Data(x: DateTime(2005, 01, 01), y: 1.6),
    Data(x: DateTime(2006, 01, 01), y: 2.3),
    Data(x: DateTime(2007, 01, 01), y: 2.5),
    Data(x: DateTime(2008, 01, 01), y: 2.9),
    Data(x: DateTime(2009, 01, 01), y: 3.8),
    Data(x: DateTime(2010, 01, 01), y: 2.0),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRangeSelector(
            initialValues: _initialValues,
            child: Container(
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: DateTimeAxis(
                  isVisible: false,
                ),
                primaryYAxis: NumericAxis(isVisible: false, maximum: 4),
                series: <SplineAreaSeries<Data, DateTime>>[
                  SplineAreaSeries<Data, DateTime>(
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
              height: 250,
            ),
          ),
        ),
      ),
    );
  }
}

Handle range change

The onChanged callback is called when the user is selecting the new values.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final DateTime x;
  final double y;
}

class HandleRangeChangeSample extends StatefulWidget {
  @override
  _HandleRangeChangeSampleState createState() => _HandleRangeChangeSampleState();
}

class _HandleRangeChangeSampleState extends State<HandleRangeChangeSample> {
  final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7);

  final List<Data> _chartData = <Data>[
    Data(x: DateTime(2003, 01, 01), y: 3.4),
    Data(x: DateTime(2004, 01, 01), y: 2.8),
    Data(x: DateTime(2005, 01, 01), y: 1.6),
    Data(x: DateTime(2006, 01, 01), y: 2.3),
    Data(x: DateTime(2007, 01, 01), y: 2.5),
    Data(x: DateTime(2008, 01, 01), y: 2.9),
    Data(x: DateTime(2009, 01, 01), y: 3.8),
    Data(x: DateTime(2010, 01, 01), y: 2.0),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRangeSelector(
            initialValues: _initialValues,
            onChanged: (SfRangeValues values) {
            },
            child: Container(
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: DateTimeAxis(
                  isVisible: false,
                ),
                primaryYAxis: NumericAxis(isVisible: false, maximum: 4),
                series: <SplineAreaSeries<Data, DateTime>>[
                  SplineAreaSeries<Data, DateTime>(
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
              height: 250,
            ),
          ),
        ),
      ),
    );
  }
}

Set numeric range

You can show numeric values in the Flutter Range Selector by setting double values to the min, max and initialValues properties.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final double x;
  final double y;
}

class NumericRangeSample extends StatelessWidget {
  final double _min = 2.0;
  final double _max = 10.0;
  final SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

  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,
            initialValues: _initialValues,
            interval: 2,
            showLabels: true,
            child: Container(
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: NumericAxis(
                  isVisible: false,
                ),
                primaryYAxis: NumericAxis(isVisible: false, maximum: 4),
                series: <SplineAreaSeries<Data, double>>[
                  SplineAreaSeries<Data, double>(
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
              height: 250,
            ),
          ),
        ),
      ),
    );
  }
}

Set date range

You can show date values in the Flutter Range Selector by setting DateTime values to the min, max and initialValues properties.

NOTE

You must import intl package for formatting date range selector using the DateFormat class.

DART

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final DateTime x;
  final double y;
}

class DateRangeSample extends StatelessWidget {
  final DateTime _min = DateTime(2002, 01, 01);
  final DateTime _max = DateTime(2010, 01, 01);
  final SfRangeValues _values = SfRangeValues(
      DateTime(2004, 01, 01), DateTime(2008, 01, 01));

  final List<Data> _chartData = <Data>[
    Data(x: DateTime(2002, 01, 01), y: 2.2),
    Data(x: DateTime(2003, 01, 01), y: 3.4),
    Data(x: DateTime(2004, 01, 01), y: 2.8),
    Data(x: DateTime(2005, 01, 01), y: 1.6),
    Data(x: DateTime(2006, 01, 01), y: 2.3),
    Data(x: DateTime(2007, 01, 01), y: 2.5),
    Data(x: DateTime(2008, 01, 01), y: 2.9),
    Data(x: DateTime(2009, 01, 01), y: 3.8),
    Data(x: DateTime(2010, 01, 01), y: 3.7),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRangeSelector(
            min: _min,
            max: _max,
            showLabels: true,
            interval: 2,
            dateFormat: DateFormat.y(),
            dateIntervalType: DateIntervalType.years,
            initialValues: _values,
            child: Container(
              height: 130,
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: DateTimeAxis(
                    minimum: _min, maximum: _max, isVisible: false),
                primaryYAxis: NumericAxis(isVisible: false),
                plotAreaBorderWidth: 0,
                series: <SplineAreaSeries<Data, DateTime>>[
                  SplineAreaSeries<Data, DateTime>(
                      color: Color.fromARGB(255, 126, 184, 253),
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Enable ticks

You can enable ticks in the Range Selector using the showTicks property.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final double x;
  final double y;
}

class EnableTicksSample extends StatelessWidget {
  final double _min = 2.0;
  final double _max = 10.0;
  final SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

  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,
            initialValues: _initialValues,
            interval: 1,
            showLabels: true,
            showTicks: true,
            child: Container(
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: NumericAxis(
                  isVisible: false,
                ),
                primaryYAxis: NumericAxis(isVisible: false, maximum: 4),
                series: <SplineAreaSeries<Data, double>>[
                  SplineAreaSeries<Data, double>(
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
              height: 250,
            ),
          ),
        ),
      ),
    );
  }
}

Add prefix/suffix to labels

You can add prefix or suffix to the labels using the numberFormat or dateFormat properties.

NOTE

The format type (numeric or date) of the Flutter Range Selector is determined based on the values specified in min, max and initialValues properties.

IMPORTANT

You must import intl package for formatting date range selector using the DateFormat class and for formatting numeric range selector using the NumberFormat class.

DART

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class Data {
  Data({required this.x, required this.y});
  final double x;
  final double y;
}

class PrefixSuffixLabelsSample extends StatelessWidget {
  final double _min = 2.0;
  final double _max = 10.0;
  final SfRangeValues _initialValues = SfRangeValues(4.5, 8.5);

  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,
            initialValues: _initialValues,
            interval: 1,
            showLabels: true,
            showTicks: true,
            numberFormat: NumberFormat("\$"),
            child: Container(
              height: 130,
              child: SfCartesianChart(
                margin: const EdgeInsets.all(0),
                primaryXAxis: NumericAxis(
                  isVisible: false,
                  minimum: _min,
                  maximum: _max,
                ),
                primaryYAxis: NumericAxis(isVisible: false, maximum: 4),
                plotAreaBorderWidth: 0,
                plotAreaBackgroundColor: Colors.transparent,
                series: <ColumnSeries<Data, double>>[
                  ColumnSeries<Data, double>(
                      dataSource: _chartData,
                      color: Color.fromARGB(255, 126, 184, 253),
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}