Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (27)Blazor  (50)DocIO  (18)Essential JS 2  (65)Essential Studio  (159)Flutter  (53)JavaScript  (135)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (402)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (106)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (235)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (25)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (141)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (18)UI  (65)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (100)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Introducing the Range Selector Widget in Flutter

In this previous post, we talked about one of our new widgets, the Range Slider, for selecting a range of values. At times, you may need to add another widget like Charts or an image as a child to it. So, here is another interesting widget that looks like the Range Slider, but has additional features: the Range Selector widget. This Range Selector widget is also available with our 2020 Volume 1 release.

The Syncfusion Flutter Range Selector is written natively in Dart. It is a lightweight and highly interactive UI widget that allows users to select a range of values from a larger data set. It has built-in support to select both date-time and numeric ranges. It also supports ticks, labels, divisors, and tooltips and, more importantly, allows you add to another widget as a child to it.

Note: Even though Flutter for web is still in beta, the Range Slider supports web platforms in addition to the iOS and Android platforms.

Flutter Range Slider

Let’s now briefly cover the features of the Range Selector, and then walk through the steps to add the widget to your application. The following are the widget’s key features:

  • Numeric and date scales
  • Divisors
  • Ticks
  • Tooltips
  • Built-in integration with Charts

Numeric and date scales

This feature allows you to select numeric and date ranges. You can render intervals with precision for both numeric and date ranges. For date ranges, render intervals spanning from years to seconds.

You can easily customize the labels of the range selection. Built-in support for labels is provided based on numeric and date types. You can customize the format, render specific intervals, and add prefixes and suffixes. You can also visualize values as text, like: Low, Medium, High.Numeric Range Slider

Divisors

Render divisors in each interval to show the ranges in an intuitive way. You can customize the size, shape, and position of the divisors easily.Divisor in Flutter Range Slider

Ticks

Set both major and minor ticks in the scale of range selector. You can use major ticks to show the intervals clearly and minor ticks to help choose the values between two intervals easily. It is also possible to customize the positions of ticks.Ticks in Flutter Range Slider

Tooltips

Use tooltips to indicate clearly the current selection of the range during interaction. You can customize the format, text, and visibility using the built-in APIs.Tooltips in Flutter Range Slider

Built-in integration with Charts

Select a segment in the Range Selector to zoom a chart based on the selected range without any additional effort.Flutter Range Slider Builtin integration with Charts

Add the Flutter Range Selector to your application

This section explains how to add the Flutter Range Selector widget to your application and use its basic features.

Step 1: Add dependency.

Add the Syncfusion Flutter Sliders dependency to your pubspec.yaml file.

dependencies:
  syncfusion_flutter_sliders: ^18.1.36-beta

Step 2: Get packages.

Run the following command to get the required packages.

dependencies:
  $ flutter pub get

Step 3: Import the library.

Now, import the library using the following code.

import 'package:syncfusion_flutter_sliders/sliders.dart';

Step 4: Add Range Selector to the widget tree.

After importing the library, initialize SfRangeSelector as a child of any widget, such as the Center widget.

@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSelector()
           )
       )
   );
}

Step 5: Enable Range Selector elements.

Enable the desired elements such as ticks, labels, and tooltips to show the selected range of values in the Range Selector. Also, add a child of any type inside the Range Selector. Here, the Charts widget is added as a child.

final double _min = 2.0;
final double _max = 10.0;
SfRangeValues _values = SfRangeValues(5.0, 8.0);

final List chartData = [
    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,
                    showLabels: true,
                    showTicks: true,
                    initialValues: _values,
                    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>(
                                color: Color.fromARGB(255, 126, 184, 253),
                                dataSource: chartData,
                                    xValueMapper: (Data sales, _) => sales.x,
                                    yValueMapper: (Data sales, _) => sales.y)
                            ],
                        ),
                   ),
              ),
          )
      )
  );
}
class Data {
  Data({this.x, this.y});
  final double x;
  final double y;
}

Handling value changes

The Range Selector widget maintains its state internally. The widget calls the onChanged callback with the new values when the values are updated.Handling value changes in Flutter Range Slider

Handle selection and zooming with Charts

You can select the segments or zoom a chart based on the selected range in Range Selector by using the same instance of RangeController for SfRangeSelector and SfChart as shown in the following code snippet.

For selection

class _RangeSelectorPageState extends State
    with SingleTickerProviderStateMixin {
 final double _min = 2.0;
 final double _max = 10.0;
 RangeController _rangeController;

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

@override
Widget build(BuildContext context) {
 return MaterialApp(
     home: Scaffold(
         body: Center(
                   .........
                   SfRangeSelector(
                   controller: _rangeController,
                   ......
                   SfCartesianChart(
                       series: <SplineAreaSeries<Data, double>>[
                           SplineAreaSeries<Data, double>(
                               selectionSettings: SelectionSettings(
                                   selectionController: _rangeController
                   ..........
          ),
     }

For zooming

class _RangeSelectorPageState extends State
    with SingleTickerProviderStateMixin {
 final double _min = 2.0;
 final double _max = 10.0;
 RangeController _rangeController;

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

@override
Widget build(BuildContext context) {
 return MaterialApp(
     home: Scaffold(
         body: Center(
                   .........
                   SfRangeSelector(
                   controller: _rangeController,
                   ......
                   SfCartesianChart(
                       primaryXAxis: NumericAxis(
                           minimum: _min,
                           maximum: _max,
                           rangeController: _rangeController),
                   ..........
          ),
     }

What is coming next?

In our upcoming releases, we have plans to include more exciting features in the Range Selector. Some of the features you can expect are:

  • Accessibility
  • A vertical slider
  • Gradient support
  • Different tooltip designs
  • Auto interval support
  • Deferred updating

Conclusion

In this blog post, we walked through our new Syncfusion Flutter Range Selector and its features. You can try this widget and share your feedback in the comments section. This widget is available in our 2020 Volume 1 release.

You can find the complete user guide here and you can also check out our samples in this GitHub location. Additionally, you can check out our demo apps in Google Play Store, App Store, and our website.

Also, if you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our support forumDirect-Trac, or feedback portal. As always, we are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top