From 5a2718dc7f3ced78c3b20bb643586cad4a1de570 Mon Sep 17 00:00:00 2001 From: HarshaMidadhalaKhajareddyMidadhala Date: Wed, 29 Jul 2026 15:05:48 +0530 Subject: [PATCH 1/2] Updated UG content --- Flutter/range-selector/accessibility.md | 76 +- Flutter/range-selector/basic-features.md | 880 ++++---- Flutter/range-selector/drag-mode.md | 344 ++-- .../enabled-and-disabled-state.md | 344 ++-- Flutter/range-selector/getting-started.md | 614 +++--- .../how-to/custom-widget-on-flutterflow.md | 13 +- ...e-snippent.png => Adding-code-snippet.png} | Bin Flutter/range-selector/interval.md | 575 +++--- Flutter/range-selector/labels-and-divider.md | 1767 +++++++++-------- Flutter/range-selector/overview.md | 5 +- Flutter/range-selector/range-controller.md | 507 +++-- Flutter/range-selector/right-to-left.md | 125 +- Flutter/range-selector/shapes.md | 509 ++--- Flutter/range-selector/thumb-and-overlay.md | 890 +++++---- Flutter/range-selector/ticks.md | 733 +++---- Flutter/range-selector/tooltip.md | 699 ++++--- Flutter/range-selector/track.md | 371 ++-- 17 files changed, 4636 insertions(+), 3816 deletions(-) rename Flutter/range-selector/how-to/how-to-section-images/{Adding-code-snippent.png => Adding-code-snippet.png} (100%) diff --git a/Flutter/range-selector/accessibility.md b/Flutter/range-selector/accessibility.md index 6e4cf03c3..6299ff6b1 100644 --- a/Flutter/range-selector/accessibility.md +++ b/Flutter/range-selector/accessibility.md @@ -1,8 +1,8 @@ --- layout: post -title: Accessibility in Flutter Range Selector widget | Syncfusion +title: Accessibility in Flutter Range Selector widget | Syncfusion description: Learn here all about the accessibility support in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Keyboard support -This feature allows you to focus on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it. +This feature allows you to focus on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it. The value changes by [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepSize.html) or [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) per key press. N> In [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time. @@ -26,36 +26,48 @@ For iOS, you can adjust the value of each thumb by moving the focus to the thumb {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( +class AccessibilityScreenReaderSample extends StatefulWidget { + @override + _AccessibilityScreenReaderSampleState createState() => + _AccessibilityScreenReaderSampleState(); +} + +class _AccessibilityScreenReaderSampleState + extends State { + SfRangeValues _values = SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: 0.0, - max: 100.0, - initialValues: _values, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value, SfThumb thumb){ - return 'The $thumb value is $value'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - child: Container( - height: 200, - color: Colors.pink[200], - ), + body: Center( + child: SfRangeSelector( + min: 0.0, + max: 100.0, + initialValues: _values, + interval: 20, + showTicks: true, + showLabels: true, + semanticFormatterCallback: (dynamic value, SfThumb thumb) { + return 'The $thumb value is $value'; + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + child: Container( + height: 200, + color: Colors.pink[200], ), - ) + ), + ), ), - ); + ); + } } {% endhighlight %} @@ -69,7 +81,7 @@ You can customize the color of the [`SfRangeSelector`](https://pub.dev/documenta * [`Major ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#major-ticks-color) * [`Minor ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#minor-ticks-color) * [`Labels`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#show-labels) -* [`Dividers`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#show-dividers) +* [`Dividers`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#divider-color) * [`Thumb`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-color) * [`Thumb overlay`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-overlay-color) * [`Active region color`](https://help.syncfusion.com/flutter/range-selector/basic-features#active-region-color) @@ -82,6 +94,6 @@ The font size of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusio * [`Label style`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#label-style) * [`Tooltip label style`](https://help.syncfusion.com/flutter/range-selector/tooltip#tooltip-label-style) -## Easier touch targets +## Touch targets -The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) has touch target as 48 * 48 as per the standard for all the elements. +The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) provides touch targets of 48 × 48 pixels for all interactive elements. diff --git a/Flutter/range-selector/basic-features.md b/Flutter/range-selector/basic-features.md index c7e38f2de..d6620eb87 100644 --- a/Flutter/range-selector/basic-features.md +++ b/Flutter/range-selector/basic-features.md @@ -1,14 +1,14 @@ --- layout: post title: Basic features in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Basic features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +description: Learn here all about adding the Basic features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. +platform: flutter control: SfRangeSelector documentation: ug --- # Basic features in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the numeric and date range selector. +This section explains how to configure numeric and date range selectors. ## Minimum @@ -20,7 +20,7 @@ The maximum value that the user can select. The default value of [`max`](https:/ ## Initial values -It represents the initial values in the range selector. The range selector's thumb is drawn corresponding to this value. +It represents the initial values in the range selector. The range selector's thumbs are drawn corresponding to this value. N> For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. @@ -31,57 +31,9 @@ You can show numeric values in the range selector by setting `double` values to {% tabs %} {% highlight Dart %} -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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -89,6 +41,62 @@ class Data { final double y; } +class NumericRangeSelectorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -103,11 +111,24 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); +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 DateRangeSelectorSample extends StatelessWidget { + final DateTime _min = DateTime(2002, 01, 01); + final DateTime _max = DateTime(2010, 01, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); -final List _chartData = [ + final List _chartData = [ 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), @@ -117,51 +138,47 @@ final List _chartData = [ 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( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -173,27 +190,39 @@ class Data { **onChangeStart** -The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeStart.html) callback is called when the user begins to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range selector thumb. +The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeStart.html) callback is called when the user begins to interact with the range selector using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range selector thumb. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - onChangeStart: (SfRangeValues startValues) { - print('Interaction started'); - }, - onChanged: (SfRangeValues newValues) {}, - child: SizedBox(), - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class OnChangeStartSample extends StatefulWidget { + @override + _OnChangeStartSampleState createState() => _OnChangeStartSampleState(); +} + +class _OnChangeStartSampleState extends State { + SfRangeValues _values = SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfRangeSelector( + min: 0.0, + max: 10.0, + initialValues: _values, + onChangeStart: (SfRangeValues startValues) { + debugPrint('Interaction started'); + }, + onChanged: (SfRangeValues newValues) {}, + child: SizedBox(), + ), + ), + ); + } } {% endhighlight %} @@ -201,27 +230,39 @@ Widget build(BuildContext context) { **onChangeEnd** -The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeEnd.html) callback is called when the user stops to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range selector thumb. +The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeEnd.html) callback is called when the user stops interacting with the range selector using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range selector thumb. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - onChangeEnd: (SfRangeValues endValues) { - print('Interaction ended'); - }, - onChanged: (SfRangeValues newValues) {}, - child: SizedBox(), - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class OnChangeEndSample extends StatefulWidget { + @override + _OnChangeEndSampleState createState() => _OnChangeEndSampleState(); +} + +class _OnChangeEndSampleState extends State { + SfRangeValues _values = SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfRangeSelector( + min: 0.0, + max: 10.0, + initialValues: _values, + onChangeEnd: (SfRangeValues endValues) { + debugPrint('Interaction ended'); + }, + onChanged: (SfRangeValues newValues) {}, + child: SizedBox(), + ), + ), + ); + } } {% endhighlight %} @@ -234,46 +275,9 @@ The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/lates {% tabs %} {% highlight Dart %} -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - 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 Container( - child: 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( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} +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}); @@ -281,6 +285,56 @@ class Data { final double y; } +class OnChangedSample extends StatefulWidget { + @override + _OnChangedSampleState createState() => _OnChangedSampleState(); +} + +class _OnChangedSampleState extends State { + final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); + + final List _chartData = [ + 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( + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + height: 250, + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -293,58 +347,9 @@ The active side of the range selector is between start and end thumbs. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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, - activeColor: Color.fromARGB(255, 253, 125, 0), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -352,6 +357,63 @@ class Data { final double y; } +class ActiveColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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, + activeColor: Color.fromARGB(255, 253, 125, 0), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -363,66 +425,16 @@ It represents the color applied to the inactive track and active dividers. The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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, - activeColor: Color.fromARGB(255,5, 90, 194), - inactiveColor: Color.fromARGB(140, 121, 244, 195), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -430,6 +442,64 @@ class Data { final double y; } +class InactiveColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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, + activeColor: Color.fromARGB(255, 5, 90, 194), + inactiveColor: Color.fromARGB(140, 121, 244, 195), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -444,62 +514,10 @@ The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfus {% tabs %} {% highlight Dart %} -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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeRegionColor: Colors.greenAccent[100], - ), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -507,6 +525,67 @@ class Data { final double y; } +class ActiveRegionColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final 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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeRegionColor: Colors.greenAccent[100], + ), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -516,69 +595,17 @@ class Data { It specifies the color for the inactive region of the child in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - inactiveRegionColor: Colors.greenAccent[100], - ), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -586,6 +613,67 @@ class Data { final double y; } +class InactiveRegionColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + inactiveRegionColor: Colors.greenAccent[100], + ), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/drag-mode.md b/Flutter/range-selector/drag-mode.md index b466ff729..24db24d87 100644 --- a/Flutter/range-selector/drag-mode.md +++ b/Flutter/range-selector/drag-mode.md @@ -1,8 +1,8 @@ --- layout: post title: Drag modes in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the multiple Drag modes in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +description: Learn here all about adding the multiple Drag modes in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. +platform: flutter control: SfRangeSelector documentation: ug --- @@ -11,63 +11,14 @@ documentation: ug ## On thumb -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.onThumb`, only individual thumb can be moved by dragging it. The nearest thumb will move to the touch position if interaction is done anywhere other than the thumb. +When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.onThumb`, only an individual thumb can be moved by dragging it. The nearest thumb will move to the touch position if interaction is done anywhere other than the thumb. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.onThumb, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -75,6 +26,63 @@ class Data { final double y; } +class DragModeOnThumbSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, + showTicks: true, + showLabels: true, + initialValues: _values, + dragMode: SliderDragMode.onThumb, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -82,63 +90,14 @@ class Data { ## Between thumbs -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. The range between the start and end thumb will always be the same. Hence, it is not possible to move the individual thumb. +When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. The range between the start and end thumbs will always be the same. Hence, it is not possible to move an individual thumb. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.betweenThumbs, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -146,6 +105,63 @@ class Data { final double y; } +class DragModeBetweenThumbsSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, + showTicks: true, + showLabels: true, + initialValues: _values, + dragMode: SliderDragMode.betweenThumbs, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -158,58 +174,9 @@ When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/lates {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.both, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -217,6 +184,63 @@ class Data { final double y; } +class DragModeBothSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 6.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: 2, + showTicks: true, + showLabels: true, + initialValues: _values, + dragMode: SliderDragMode.both, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/enabled-and-disabled-state.md b/Flutter/range-selector/enabled-and-disabled-state.md index 74d5981e7..7d177dfd6 100644 --- a/Flutter/range-selector/enabled-and-disabled-state.md +++ b/Flutter/range-selector/enabled-and-disabled-state.md @@ -1,71 +1,163 @@ --- layout: post -title: Disabled state in Flutter Range Selector widget | Syncfusion -description: Learn here all about the Disabled state in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: Flutter +title: Enable & Disable States in Flutter Range Selector Widget | Syncfusion +description: Learn here all about the enabled and disabled states in Syncfusion Flutter Range Selector (SfRangeSelector) widget. +platform: flutter control: SfRangeSelector documentation: ug --- -# Disabled state in Flutter Range Selector (SfRangeSelector) +# Enabled and Disabled states in Flutter Range Selector -This section helps to learn about the disabled state in the Flutter range selector. +This section explains the enabled and disabled states in the Flutter range selector. + +## Enabled state + +By default, the range selector is rendered in the enabled state. You can explicitly control it using the [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property. The default value of the [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property is `true`. + +{% tabs %} +{% highlight Dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class EnabledStateSample extends StatefulWidget { + @override + _EnabledStateSampleState createState() => _EnabledStateSampleState(); +} + +class _EnabledStateSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _initialValues = 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, + enabled: true, + initialValues: _initialValues, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + +class Data { + Data({required this.x, required this.y}); + final double x; + final double y; +} + +{% endhighlight %} +{% endtabs %} ## Disabled state -You can render the range selector in disabled state using [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property. The default value of [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property is `true`. +You can render the range selector in a disabled state using the [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property. The default value of the [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property is `true`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = 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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DisabledStateSample extends StatefulWidget { + @override + _DisabledStateSampleState createState() => _DisabledStateSampleState(); +} + +class _DisabledStateSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _initialValues = 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, - enabled: false, - initialValues: _initialValues, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + enabled: false, + initialValues: _initialValues, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -81,86 +173,100 @@ class Data { ## Disabled color -You can change, +You can change the following: -* The color of the active and inactive track in disabled state using the [`disabledActiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTrackColor.html) and [`disabledInactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTrackColor.html) properties. -* The color of the active and inactive major ticks in disabled state using the [`disabledActiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTickColor.html) and [`disabledInactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTickColor.html) properties. -* The color of the active and inactive minor ticks in disabled state using the [`disabledActiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveMinorTickColor.html) and [`disabledInactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveMinorTickColor.html) properties. -* The color of the active and inactive dividers in disabled state using the [`disabledActiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveDividerColor.html) and [`disabledInactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveDividerColor.html) properties. -* The color of the thumb in disabled state using the [`disabledThumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledThumbColor.html) property. +* The color of the active and inactive track in the disabled state using the [`disabledActiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTrackColor.html) and [`disabledInactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTrackColor.html) properties. +* The color of the active and inactive major ticks in the disabled state using the [`disabledActiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTickColor.html) and [`disabledInactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTickColor.html) properties. +* The color of the active and inactive minor ticks in the disabled state using the [`disabledActiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveMinorTickColor.html) and [`disabledInactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveMinorTickColor.html) properties. +* The color of the active and inactive dividers in the disabled state using the [`disabledActiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveDividerColor.html) and [`disabledInactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveDividerColor.html) properties. +* The color of the thumb in the disabled state using the [`disabledThumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledThumbColor.html) property. N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.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 +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DisabledColorSample extends StatefulWidget { + @override + _DisabledColorSampleState createState() => _DisabledColorSampleState(); +} + +class _DisabledColorSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _initialValues = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - disabledActiveTrackColor: Colors.red[900], - disabledInactiveTrackColor: Colors.red[200], - disabledActiveTickColor: Colors.red[900], - disabledInactiveTickColor: Colors.red[200], - disabledActiveMinorTickColor: Colors.red[900], - disabledInactiveMinorTickColor: Colors.red[200], - disabledActiveDividerColor: Colors.blue[900], - disabledInactiveDividerColor: Colors.blue[200], - disabledThumbColor: Colors.red, - activeTrackHeight: 4, - inactiveTrackHeight: 4, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - enabled: false, - showTicks: true, - showDividers: true, - initialValues: _initialValues, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), + home: Scaffold( + body: Center( + child: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + disabledActiveTrackColor: Colors.red[900], + disabledInactiveTrackColor: Colors.red[200], + disabledActiveTickColor: Colors.red[900], + disabledInactiveTickColor: Colors.red[200], + disabledActiveMinorTickColor: Colors.red[900], + disabledInactiveMinorTickColor: Colors.red[200], + disabledActiveDividerColor: Colors.blue[900], + disabledInactiveDividerColor: Colors.blue[200], + disabledThumbColor: Colors.red, + activeTrackHeight: 4, + inactiveTrackHeight: 4, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showLabels: true, + enabled: false, + showTicks: true, + showDividers: true, + initialValues: _initialValues, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), ), - ) - ) + ), + ), + ), + ), ); + } } class Data { diff --git a/Flutter/range-selector/getting-started.md b/Flutter/range-selector/getting-started.md index be29a14ef..dbd9b5daf 100644 --- a/Flutter/range-selector/getting-started.md +++ b/Flutter/range-selector/getting-started.md @@ -8,9 +8,9 @@ documentation: ug --- # Getting started with Flutter Range Selector (SfRangeSelector) -This section explains the steps required to add the range selector widget and its elements such as numeric and date values, ticks, labels and tooltips. This section covers only basic features needed to know to get started with Syncfusion® range selector. +This section explains the steps required to add the 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® range selector. -To get start quickly with our Flutter Range Selector widget, you can check out this video. +To get started quickly with our Flutter Range Selector widget, you can check out this video. @@ -22,6 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter range selector dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -29,6 +30,7 @@ dependencies: syncfusion_flutter_sliders: ^xx.x.xx {% endhighlight %} +{% endtabs %} N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Sliders`](https://pub.dev/packages/syncfusion_flutter_sliders/versions) package. @@ -36,18 +38,20 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Sliders` Run the following command to get the required packages. +{% tabs %} {% highlight dart %} -$ flutter pub get +flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_sliders/sliders.dart'; @@ -56,51 +60,16 @@ import 'package:syncfusion_flutter_sliders/sliders.dart'; ## Initialize range selector -After importing the package, initialize the 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 value of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties of the SfRangeSelector is 0.0 and 1.0 respectively. So, the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property must be given within the range. You can add any kind of widget as a child of range selector. Here, [Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget is added as a child. +After importing the package, initialize the 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`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties of the SfRangeSelector are 0.0 and 1.0 respectively. So, the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property must be given within the range. You can add any kind of widget as a child of range selector. Here, [Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget is added as a child. I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. {% tabs %} {% highlight Dart %} -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - 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 Container( - child: 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( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} +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}); @@ -108,6 +77,50 @@ class Data { final double y; } +class GettingStartedInitializeSample extends StatelessWidget { + final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); + + final List _chartData = [ + 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( + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + height: 250, + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -117,51 +130,12 @@ class Data { The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html) callback is called when the user is selecting the new values. -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - {% tabs %} {% highlight Dart %} -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - 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 Container( - child: 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( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} +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}); @@ -169,6 +143,57 @@ class Data { final double y; } +class HandleRangeChangeSample extends StatefulWidget { + @override + _HandleRangeChangeSampleState createState() => _HandleRangeChangeSampleState(); +} + +class _HandleRangeChangeSampleState extends State { + final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); + + final List _chartData = [ + 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( + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + height: 250, + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -176,56 +201,12 @@ class Data { You can show numeric values in the range selector by setting `double` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.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 Container( - child: 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( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} +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}); @@ -233,6 +214,57 @@ class Data { 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 _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, + 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( + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + height: 250, + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -244,16 +276,27 @@ You can show date values in the range selector by setting `DateTime` values to t N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); +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 _chartData = [ + final List _chartData = [ 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), @@ -263,48 +306,43 @@ final List _chartData = [ 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 Container( - child: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), + ]; + + @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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + } } {% endhighlight %} @@ -316,57 +354,12 @@ class Data { You can enable ticks in the range selector using the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property. -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.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 Container( - child: 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( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} +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}); @@ -374,6 +367,58 @@ class Data { 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 _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, + 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( + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + height: 250, + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -390,59 +435,10 @@ I> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.5, 8.5); - -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 Container( - child: 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( - dataSource: _chartData, - color: Color.fromARGB(255, 126, 184, 253), - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ); -} +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}); @@ -450,6 +446,64 @@ class Data { 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 _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, + 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( + dataSource: _chartData, + color: Color.fromARGB(255, 126, 184, 253), + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md b/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md index b1854a612..4f23473d8 100644 --- a/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md @@ -7,7 +7,7 @@ control: SfRangeSelector documentation: ug --- -# How to add Syncfusion® RangeSelector widget in FlutterFlow? +# How to add Syncfusion® RangeSelector widget in Flutter? ## Overview @@ -22,8 +22,8 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 1. Navigate to the `Custom Code` section in the left side navigation menu. 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +4. Click the `View Boilerplate Code` button on the right side, represented by the `[]` icon. +5. A popup will appear with boilerplate code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,10 +52,10 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_sliders/example) tab in [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_sliders/example) tab in [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) and copy the widget-specific code sample. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) ### Compiling the codes @@ -71,5 +71,6 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 1. Navigate to `Widget Palette` located in the left side navigation menu. 2. Click on the `Components` tab. 3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. +4. To bind data to the custom widget, select it on the canvas and use the right-hand properties panel to configure parameters (such as start and end values). If your widget exposes constructor parameters accepted from FlutterFlow, wire them to your app state or a data source from the `Properties` panel and `Save` the changes. ![Page](how-to-section-images/page.png) diff --git a/Flutter/range-selector/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/range-selector/how-to/how-to-section-images/Adding-code-snippet.png similarity index 100% rename from Flutter/range-selector/how-to/how-to-section-images/Adding-code-snippent.png rename to Flutter/range-selector/how-to/how-to-section-images/Adding-code-snippet.png diff --git a/Flutter/range-selector/interval.md b/Flutter/range-selector/interval.md index 73588c695..0a9271da3 100644 --- a/Flutter/range-selector/interval.md +++ b/Flutter/range-selector/interval.md @@ -2,74 +2,26 @@ layout: post title: Interval in Flutter Range Selector widget | Syncfusion description: Learn here all about adding the Interval feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Interval in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the intervals for numeric and date range selector. +This section explains how to set intervals for numeric and date range selectors. ## Numeric interval -Range selector elements like labels, ticks and dividers are rendered based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties. The default value of the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) property is `null` and it must be greater than 0. +Range selector elements like labels, ticks, and dividers are rendered based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties. The default value of the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) property is `null`, and it must be greater than 0. -For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 2.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the labels, major ticks, and dividers at 2.0, 4.0 and so on. +For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 2.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the labels, major ticks, and dividers at 2.0, 4.0, and so on. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: 2, - 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: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -77,6 +29,62 @@ class Data { final double y; } +class NumericIntervalSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: 2, + 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: >[ + ColumnSeries( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -98,11 +106,24 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List chartData = [ +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +class DateIntervalSample 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 chartData = [ 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), @@ -112,51 +133,47 @@ final List chartData = [ 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( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: 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: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: 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: >[ + ColumnSeries( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -171,59 +188,9 @@ You can move the thumb in discrete manner for numeric values using the [`stepSiz {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: 2, - stepSize: 1, - showLabels: true, - showTicks: true, - minorTicksPerInterval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -231,6 +198,64 @@ class Data { final double y; } +class StepSizeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: 2, + stepSize: 1, + showLabels: true, + showTicks: true, + minorTicksPerInterval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -240,66 +265,15 @@ class Data { You can move the thumb in discrete manner for date values based on the value provided in the [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) property in the range selector. -For example, if [min](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is DateTime(2015, 01, 01) and [max](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is DateTime(2020, 01, 01) and [stepDuration](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) is SliderDuration(years: 1, months: 6),the range selector will move the thumbs at DateTime(2015, 01, 01), DateTime(2016, 07, 01), DateTime(2018, 01, 01),and DateTime(2019, 07, 01). +For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is `DateTime(2015, 01, 01)` and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is `DateTime(2020, 01, 01)` and [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) is `SliderStepDuration(years: 1, months: 6)`, the range selector will move the thumbs to `DateTime(2015, 01, 01)`, `DateTime(2016, 07, 01)`, `DateTime(2018, 01, 01)`, `DateTime(2019, 07, 01)`, and so on. {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - 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, - showTicks: true, - interval: 2, - stepDuration: SliderStepDuration(years: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -307,6 +281,66 @@ class Data { final double y; } +class StepDurationSample extends StatelessWidget { + final DateTime _min = DateTime(2015, 01, 01); + final DateTime _max = DateTime(2020, 01, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2016, 07, 01), DateTime(2018, 01, 01)); + + final List chartData = [ + Data(x: DateTime(2015, 01, 01), y: 2.2), + Data(x: DateTime(2016, 01, 01), y: 3.4), + Data(x: DateTime(2016, 07, 01), y: 2.8), + Data(x: DateTime(2017, 01, 01), y: 1.6), + Data(x: DateTime(2018, 01, 01), y: 2.3), + Data(x: DateTime(2018, 07, 01), y: 2.5), + Data(x: DateTime(2019, 01, 01), y: 2.9), + Data(x: DateTime(2019, 07, 01), y: 3.8), + Data(x: DateTime(2020, 01, 01), y: 3.7), + ]; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 2, + stepDuration: SliderStepDuration(years: 1, months: 6), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -314,66 +348,15 @@ class Data { ## Enable interval selection -You can select a particular interval by tapping when setting the [`enableIntervalSelection`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableIntervalSelection.html) property as `true`. Both the thumbs will be moved to the current interval with animation. +You can select a particular interval by tapping when setting the [`enableIntervalSelection`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableIntervalSelection.html) property as `true`. Both thumbs will be moved to the current interval with animation. {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - 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, - showTicks: true, - interval: 2, - enableIntervalSelection: true, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -381,6 +364,66 @@ class Data { final double y; } +class IntervalSelectionSample 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 chartData = [ + 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, + showTicks: true, + interval: 2, + enableIntervalSelection: true, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/labels-and-divider.md b/Flutter/range-selector/labels-and-divider.md index d0e13ea08..0bb0a4c83 100644 --- a/Flutter/range-selector/labels-and-divider.md +++ b/Flutter/range-selector/labels-and-divider.md @@ -1,14 +1,14 @@ --- layout: post title: Labels in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Labels feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +description: Learn here all about adding the Labels feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. +platform: flutter control: SfRangeSelector documentation: ug --- -# Labels in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the labels and dividers in the range selector. +# Labels and Dividers in Flutter Range Selector (SfRangeSelector) +This section explains how to add labels and dividers to the range selector. ## Show labels @@ -17,57 +17,9 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/late {% tabs %} {% highlight Dart %} -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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -75,6 +27,62 @@ class Data { final double y; } +class ShowLabelsSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -93,58 +101,10 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.5, 8.5); - -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, - numberFormat: NumberFormat("\$"), - 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: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -152,6 +112,63 @@ class Data { final double y; } +class NumberFormatSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.5, 8.5); + + 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, + numberFormat: NumberFormat("\$"), + 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: >[ + ColumnSeries( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -159,7 +176,7 @@ class Data { ## Date format -The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is used to format the date labels. It is mandatory for date [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is `null`. +The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is used to format the date labels. It is mandatory for the date [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is `null`. N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. @@ -168,11 +185,24 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2000, 01, 01); -final DateTime _max = DateTime(2008, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2006, 01, 01)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List _chartData = [ +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +class YearFormatSample extends StatelessWidget { + final DateTime _min = DateTime(2000, 01, 01); + final DateTime _max = DateTime(2008, 01, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2006, 01, 01)); + + final List _chartData = [ Data(x: DateTime(2000, 01, 01), y: 2.2), Data(x: DateTime(2001, 01, 01), y: 3.4), Data(x: DateTime(2002, 01, 01), y: 2.8), @@ -182,51 +212,47 @@ final List _chartData = [ Data(x: DateTime(2006, 01, 01), y: 2.9), Data(x: DateTime(2007, 01, 01), y: 3.8), Data(x: DateTime(2008, 01, 01), y: 3.7), -]; + ]; -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -239,60 +265,10 @@ class Data { {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2000, 01, 01); -final DateTime _max = DateTime(2000, 09, 01); -SfRangeValues _values = SfRangeValues(DateTime(2000, 05, 01), DateTime(2000, 07, 01)); - -final List chartData = [ - Data(x: DateTime(2000, 01, 01), y: 2.2), - Data(x: DateTime(2000, 01, 01), y: 3.4), - Data(x: DateTime(2000, 01, 01), y: 2.8), - Data(x: DateTime(2000, 01, 01), y: 1.6), - Data(x: DateTime(2000, 01, 01), y: 2.3), - Data(x: DateTime(2000, 01, 01), y: 2.5), - Data(x: DateTime(2000, 01, 01), y: 2.9), - Data(x: DateTime(2000, 01, 01), y: 3.8), - Data(x: DateTime(2000, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -300,6 +276,65 @@ class Data { final double y; } +class MonthFormatSample extends StatelessWidget { + final DateTime _min = DateTime(2000, 01, 01); + final DateTime _max = DateTime(2000, 09, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2000, 05, 01), DateTime(2000, 07, 01)); + + final List chartData = [ + Data(x: DateTime(2000, 01, 01), y: 2.2), + Data(x: DateTime(2000, 02, 01), y: 3.4), + Data(x: DateTime(2000, 03, 01), y: 2.8), + Data(x: DateTime(2000, 04, 01), y: 1.6), + Data(x: DateTime(2000, 05, 01), y: 2.3), + Data(x: DateTime(2000, 06, 01), y: 2.5), + Data(x: DateTime(2000, 07, 01), y: 2.9), + Data(x: DateTime(2000, 08, 01), y: 3.8), + Data(x: DateTime(2000, 09, 01), y: 3.7), + ]; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 2, + dateFormat: DateFormat.yM(), + dateIntervalType: DateIntervalType.months, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -310,11 +345,24 @@ class Data { {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); +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 HourFormatSample extends StatelessWidget { + final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); + final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); + final SfRangeValues _values = SfRangeValues( + DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); -final List _chartData = [ + final List _chartData = [ Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), @@ -324,51 +372,47 @@ final List _chartData = [ Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; + ]; -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 2, + dateFormat: DateFormat('h:mm a'), + dateIntervalType: DateIntervalType.hours, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: _chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -376,7 +420,7 @@ class Data { ![Hour date format support](images/label-and-divider/selector_hour_date_format.png) -N> Refer the [`DateFormat`](https://api.flutter.dev/flutter/intl/DateFormat-class.html) class for other date format. +N> Refer the [`DateFormat`](https://api.flutter.dev/flutter/package-intl_intl/DateFormat-class.html) class for other date format. ## Label placement @@ -385,11 +429,24 @@ The [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/ {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List chartData = [ +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +class LabelPlacementSample extends StatelessWidget { + final DateTime _min = DateTime(2002, 01, 01); + final DateTime _max = DateTime(2010, 01, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); + + final List chartData = [ 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), @@ -399,52 +456,48 @@ final List chartData = [ 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( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - dateFormat: DateFormat.y(), - labelPlacement: LabelPlacement.betweenTicks, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 1, + dateFormat: DateFormat.y(), + labelPlacement: LabelPlacement.betweenTicks, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -461,11 +514,24 @@ The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfu {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List chartData = [ +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +class EdgeLabelPlacementSample extends StatelessWidget { + final DateTime _min = DateTime(2002, 01, 01); + final DateTime _max = DateTime(2010, 01, 01); + final SfRangeValues _values = + SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); + + final List chartData = [ 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), @@ -475,52 +541,48 @@ final List chartData = [ 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( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - dateFormat: DateFormat.y(), - edgeLabelPlacement: EdgeLabelPlacement.inside, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 1, + dateFormat: DateFormat.y(), + edgeLabelPlacement: EdgeLabelPlacement.inside, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -541,60 +603,9 @@ You can format or change the whole numeric or date label text using the [`labelF {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(100.0, 10000.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: 100.0, - max: 10000.0, - initialValues: _values, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - 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: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -602,6 +613,65 @@ class Data { final double y; } +class CustomizeLabelTextSample extends StatelessWidget { + final SfRangeValues _values = SfRangeValues(100.0, 10000.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: 100.0, + max: 10000.0, + initialValues: _values, + showLabels: true, + interval: 9900, + labelFormatterCallback: + (dynamic actualValue, String formattedText) { + return actualValue == 10000 + ? '\$ $formattedText+' + : '\$ $formattedText'; + }, + child: Container( + height: 130, + child: SfCartesianChart( + margin: const EdgeInsets.all(0), + primaryXAxis: NumericAxis( + minimum: 100.0, + maximum: 10000.0, + isVisible: false, + ), + primaryYAxis: NumericAxis(isVisible: false), + plotAreaBorderWidth: 0, + series: >[ + ColumnSeries( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -613,72 +683,19 @@ You can change the active and inactive label appearance of the range selector us The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). This applies to all the theme-based examples in this section. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -686,6 +703,74 @@ class Data { final double y; } +class LabelStyleSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeLabelStyle: TextStyle( + color: Colors.red, + fontSize: 12, + fontStyle: FontStyle.italic), + inactiveLabelStyle: TextStyle( + color: Colors.red[200], + fontSize: 12, + fontStyle: FontStyle.italic), + ), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -698,78 +783,104 @@ You can now customize the appearance of each label on the [`SfRangeSelector`](ht {% tabs %} {% highlight 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 IndividualLabelStyleSample extends StatefulWidget { + @override + _IndividualLabelStyleSampleState createState() => + _IndividualLabelStyleSampleState(); +} + +class _IndividualLabelStyleSampleState + extends State { final double _min = 2.0; final double _max = 10.0; SfRangeValues _values = const SfRangeValues(4.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 Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - onChanged: (dynamic value) { - setState(() { - _values = value; - }); - }, - onLabelCreated: ( - dynamic actualValue, - String text, - TextStyle labelTextStyle, - ) { - final int value = actualValue.toInt(); - final int start = _values.start.toInt(); - final int end = _values.end.toInt(); - return RangeSelectorLabel( - text: text, - textStyle: - (value == start || value == end) - ? const TextStyle( + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showLabels: true, + showTicks: true, + initialValues: _values, + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + onLabelCreated: ( + dynamic actualValue, + String text, + TextStyle labelTextStyle, + ) { + final int value = actualValue.toInt(); + final int start = (_values.start as double).toInt(); + final int end = (_values.end as double).toInt(); + return RangeSelectorLabel( + text: text, + textStyle: (value == start || value == end) + ? const TextStyle( color: Colors.blue, fontSize: 14, ) - : TextStyle( + : TextStyle( color: Colors.red[200], fontSize: 10, ), - ); - }, - child: SizedBox( - height: 130, - child: SfCartesianChart( - margin: EdgeInsets.zero, - primaryXAxis: NumericAxis( - minimum: _min, - maximum: _max, - isVisible: false, - ), - primaryYAxis: const NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: const Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, + ); + }, + child: SizedBox( + height: 130, + child: SfCartesianChart( + margin: EdgeInsets.zero, + primaryXAxis: NumericAxis( + minimum: _min, + maximum: _max, + isVisible: false, ), - ], + primaryYAxis: const NumericAxis(isVisible: false), + plotAreaBorderWidth: 0, + series: >[ + SplineAreaSeries( + color: const Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y, + ), + ], + ), ), ), ), ), ); } - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; } {% endhighlight %} @@ -781,70 +892,16 @@ class Data { You can adjust the space between ticks and labels of the range selector using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property. -The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 13.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. -The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 5.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `true`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +The default value of the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 13.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. +The default value of the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 5.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `true`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - labelOffset: Offset(0, 15), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showDividers: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -852,6 +909,67 @@ class Data { final double y; } +class LabelOffsetSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + labelOffset: Offset(0, 15), + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showLabels: true, + showDividers: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -866,57 +984,9 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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, - showDividers: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -924,6 +994,62 @@ class Data { final double y; } +class ShowDividersSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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, + showDividers: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -933,69 +1059,13 @@ class Data { You can change the active and inactive divider radius of the range selector using the [`activeDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerRadius.html) and the [`inactiveDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerRadius.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5 - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -1003,6 +1073,69 @@ class Data { final double y; } +class DividerRadiusSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 5, + inactiveDividerRadius: 5, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showDividers: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -1014,71 +1147,13 @@ You can change the active and inactive divider stroke width of the range selecto Also, you can change the active and inactive divider stroke color of the range selector using the [`activeDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeColor.html) and the [`inactiveDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeColor.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -1086,6 +1161,71 @@ class Data { final double y; } +class DividerStrokeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerStrokeColor: Colors.red, + activeDividerStrokeWidth: 2, + inactiveDividerStrokeWidth: 2, + inactiveDividerStrokeColor: Colors.red, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showDividers: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -1095,69 +1235,13 @@ class Data { You can change the active and inactive divider color of the range selector using the [`activeDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerColor.html) and [`inactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerColor.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -1165,6 +1249,69 @@ class Data { final double y; } +class DividerColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + activeDividerColor: Colors.red, + inactiveDividerColor: Colors.red[200], + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showDividers: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/overview.md b/Flutter/range-selector/overview.md index 88866a821..d24860431 100644 --- a/Flutter/range-selector/overview.md +++ b/Flutter/range-selector/overview.md @@ -15,9 +15,10 @@ Syncfusion® Flutter Range Selector is a highly interactive UI wid ## Features -* **Child support** - Add a child of any type inside the range selector. It is also possible to add [Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget. With the built-in integrations, the range selector is smart enough to handle features like segment selection and zooming in the chart based on the selected range in the range selector. Similar to the range slider, it also supports both numeric and date values. +* **Child support** - Add a child of any type inside the range selector. It is also possible to add a [Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget. With the built-in integrations, the range selector is smart enough to handle features like segment selection and zooming in the chart based on the selected range in the range selector. Similar to the range slider, it also supports both numeric and date values. * **Numeric and date support** - Provides functionality for selecting numeric and date ranges. For the date range, support is provided up to the seconds interval. * **Labels** - Render labels for the date and numeric ranges with the option to customize their format based on your requirements. * **Ticks and dividers** - Provides the option to show ticks and dividers based on the interval. Also enables minor ticks to indicate the values between each interval. These options present the selected range in a more intuitive way for end users. -* **Highly customizable** - In addition to the rich set of built-in features, fully customize the control in a much simpler way using the wide range of provided options. +* **Highly customizable** - In addition to the rich set of built-in features, the control is fully customizable through its wide range of options. * **Tooltips** - Render tooltips to show the selected range clearly. It is also possible to customize the format of the text shown in the tooltip. +* **Orientation** - Supports both horizontal and vertical orientations. diff --git a/Flutter/range-selector/range-controller.md b/Flutter/range-selector/range-controller.md index 7f8e80c40..65dfbe856 100644 --- a/Flutter/range-selector/range-controller.md +++ b/Flutter/range-selector/range-controller.md @@ -11,86 +11,98 @@ documentation: ug You can use [`RangeController`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/RangeController-class.html) for setting and getting current selected values of range selector. -The `start` represents the currently selected start value of the range selector. The left thumb of the range selector was drawn corresponding to this value. +The `start` represents the currently selected start value of the range selector. The left thumb of the range selector is drawn corresponding to this value. -The `end` represents the currently selected end value of the range selector. The right thumb of the range selector was drawn corresponding to this value. +The `end` represents the currently selected end value of the range selector. The right thumb of the range selector is drawn corresponding to this value. You can get previous values using `previousStart` and `previousEnd` properties. The `start`, `end`, `previousStart`, `previousEnd` properties can be either `double` or `DateTime` based on whether it is date type [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-date-range) or numeric [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-numeric-range). -I> You need not to set the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property when using [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property in the range selector. +I> You do not need to set the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property when using the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property in the range selector. N> You must import the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) to use the range controller in the range selector. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.0); -RangeController _rangeController; - -@override -void initState() { - super.initState(); - _rangeController = RangeController( - start: _values.start, - end: _values.end); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/core.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); +class ControllerSample extends StatefulWidget { + @override + _ControllerSampleState createState() => _ControllerSampleState(); } -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( +class _ControllerSampleState extends State { + 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 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, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -106,29 +118,29 @@ class Data { ## Selection with SfChart -We have provided built-in support for selecting the chart segments based on the selected range in range selector. To achieve this segment selection, you must set the `SelectionSettings.selectionController` property in the `SfCartesianChart.series` property. +The range selector provides built-in support for selecting the chart segments based on the selected range in the range selector. To achieve this segment selection, you must set the `SelectionBehavior.selectionController` property in the `SfCartesianChart.series` property. The [`selectionController`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectionController.html) links the chart selection to the range selector's controller. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2010, 03, 01), DateTime(2010, 06, 01)); -RangeController _rangeController; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/core.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -void initState() { - super.initState(); - _rangeController = RangeController( - start: _values.start, - end: _values.end); +class SelectionWithSfChartSample extends StatefulWidget { + @override + _SelectionWithSfChartSampleState createState() => + _SelectionWithSfChartSampleState(); } -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); -} +class _SelectionWithSfChartSampleState + extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2010, 03, 01), DateTime(2010, 06, 01)); + late RangeController _rangeController; -final List chartData = [ + final List chartData = [ Data(x: DateTime(2010, 01, 01), y: 2.2), Data(x: DateTime(2010, 02, 01), y: 3.4), Data(x: DateTime(2010, 03, 01), y: 2.8), @@ -138,75 +150,87 @@ final List chartData = [ Data(x: DateTime(2010, 07, 01), y: 2.9), Data(x: DateTime(2010, 08, 01), y: 3.8), Data(x: DateTime(2010, 09, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRangeSelector( - min: DateTime(2010, 01, 01), - max: DateTime(2010, 09, 01), - interval: 2, - dateIntervalType: DateIntervalType.months, - dateFormat: DateFormat.yM(), - showTicks: true, - showLabels: true, - controller: _rangeController, - onChanged: (SfRangeValues values) { - setState(() {}); - }, - child: SizedBox( - height: 130, - child: SfCartesianChart( - margin: EdgeInsets.zero, - primaryXAxis: DateTimeAxis( - minimum: DateTime(2010, 01, 01), - maximum: DateTime(2010, 09, 01), - isVisible: false, - ), - primaryYAxis: const NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - plotAreaBackgroundColor: Colors.transparent, - series: >[ - ColumnSeries( - dataSource: chartData, - selectionBehavior: SelectionBehavior( - selectionController: _rangeController, + ]; + + @override + void initState() { + super.initState(); + _rangeController = + RangeController(start: _values.start, end: _values.end); + } + + @override + void dispose() { + _rangeController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSelector( + min: DateTime(2010, 01, 01), + max: DateTime(2010, 09, 01), + interval: 2, + dateIntervalType: DateIntervalType.months, + dateFormat: DateFormat.yM(), + showTicks: true, + showLabels: true, + controller: _rangeController, + onChanged: (SfRangeValues values) { + setState(() {}); + }, + child: SizedBox( + height: 130, + child: SfCartesianChart( + margin: EdgeInsets.zero, + primaryXAxis: DateTimeAxis( + minimum: DateTime(2010, 01, 01), + maximum: DateTime(2010, 09, 01), + isVisible: false, ), - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, - pointColorMapper: (Data sales, int index) { - if (sales.x.isAfter(_rangeController.start) && - sales.x.isBefore(_rangeController.end)) { - return const Color.fromRGBO(0, 178, 206, 1); - } - return Colors.transparent; - }, - color: const Color.fromRGBO(255, 255, 255, 0), - dashArray: const [5, 4], - borderColor: const Color.fromRGBO(194, 194, 194, 1), - animationDuration: 0, - borderWidth: 1, + primaryYAxis: const NumericAxis(isVisible: false), + plotAreaBorderWidth: 0, + plotAreaBackgroundColor: Colors.transparent, + series: >[ + ColumnSeries( + dataSource: chartData, + selectionBehavior: SelectionBehavior( + selectionController: _rangeController, + ), + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y, + pointColorMapper: (Data sales, int index) { + final DateTime start = + _rangeController.start as DateTime; + final DateTime end = _rangeController.end as DateTime; + if (sales.x.isAfter(start) && sales.x.isBefore(end)) { + return const Color.fromRGBO(0, 178, 206, 1); + } + return Colors.transparent; + }, + color: const Color.fromRGBO(255, 255, 255, 0), + dashArray: const [5, 4], + borderColor: const Color.fromRGBO(194, 194, 194, 1), + animationDuration: 0, + borderWidth: 1, + ), + ], ), - ], + ), ), ), ), - ), - ); + ); + } } -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight Dart %} - class Data { - Data({this.x, this.y}); - final DateTime x; - final double y; + Data({required this.x, required this.y}); + final DateTime x; + final double y; } {% endhighlight %} @@ -216,30 +240,30 @@ class Data { ## Zooming with SfChart -We have provided built-in support for updating the visible range of the chart based on the selected range in range selector. To update the visible range, you must set the `primaryYAxis.rangeController` property in the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). +The range selector provides built-in support for updating the visible range of the chart based on the selected range in the range selector. To update the visible range, you must set the `primaryXAxis.rangeController` property in the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 19.0; -SfRangeValues _values = SfRangeValues(8.0, 16.0); -RangeController _rangeController; -SfCartesianChart splineChart; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/core.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -void initState() { - super.initState(); - _rangeController = RangeController(start: _values.start, end: _values.end); +class ZoomingWithSfChartSample extends StatefulWidget { + @override + _ZoomingWithSfChartSampleState createState() => + _ZoomingWithSfChartSampleState(); } -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); -} +class _ZoomingWithSfChartSampleState extends State { + final double _min = 2.0; + final double _max = 19.0; + SfRangeValues _values = SfRangeValues(8.0, 16.0); + late RangeController _rangeController; + late SfCartesianChart splineChart; -final List chartData = [ + final List chartData = [ Data(x: 2.0, y: 2.2), Data(x: 3.0, y: 3.4), Data(x: 4.0, y: 2.8), @@ -258,10 +282,23 @@ final List chartData = [ Data(x: 17.0, y: 2.9), Data(x: 18.0, y: 3.8), Data(x: 19.0, y: 3.7), -]; + ]; + + @override + void initState() { + super.initState(); + _rangeController = + RangeController(start: _values.start, end: _values.end); + } -@override -Widget build(BuildContext context) { + @override + void dispose() { + _rangeController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { splineChart = SfCartesianChart( margin: const EdgeInsets.only(left: 10, right: 10, bottom: 20), primaryXAxis: NumericAxis( @@ -281,7 +318,8 @@ Widget build(BuildContext context) { ], ); - return Scaffold( + return MaterialApp( + home: Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 10, right: 10, top: 80), @@ -320,8 +358,10 @@ Widget build(BuildContext context) { ], ), ), - ) + ), + ), ); + } } class Data { @@ -344,13 +384,26 @@ It updates the [`controller`](https://pub.dev/documentation/syncfusion_flutter_s {% tabs %} {% highlight Dart %} -final DateTime min = DateTime(2000, 01, 01, 0), max = DateTime(2000, 12, 15); -RangeController rangeController; -SfCartesianChart splineAreaChart, splineChart; -List data; +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/core.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DeferredUpdateSample extends StatefulWidget { + @override + _DeferredUpdateSampleState createState() => _DeferredUpdateSampleState(); +} + +class _DeferredUpdateSampleState extends State { + final DateTime min = DateTime(2000, 01, 01, 0), max = DateTime(2000, 12, 15); + late RangeController rangeController; + late SfCartesianChart splineAreaChart; + late SfCartesianChart splineChart; + late List data; -@override -void initState() { + @override + void initState() { super.initState(); rangeController = RangeController( start: DateTime(2000, 04, 15), @@ -396,11 +449,17 @@ void initState() { yValueMapper: (Data sales, int index) => sales.y, ) ], - ); -} + ); + } -@override -Widget build(BuildContext context) { + @override + void dispose() { + rangeController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { splineChart = SfCartesianChart( plotAreaBorderWidth: 0, primaryXAxis: DateTimeAxis( @@ -424,60 +483,68 @@ Widget build(BuildContext context) { ], ); final Widget page = Container( - margin: const EdgeInsets.all(0), - padding: const EdgeInsets.all(0), - child: Center( - child: Column( - children: [ - Expanded( - child: Container( - padding: const EdgeInsets.fromLTRB(5, 20, 15, 25), - child: splineChart), - ), - Container( - margin: const EdgeInsets.all(0), - padding: const EdgeInsets.all(0), - child: Center( - child: Padding( - padding: const EdgeInsets.fromLTRB(14, 0, 15, 15), - child: SfRangeSelector( - min: min, - max: max, - interval: 1, - enableDeferredUpdate: true, - deferredUpdateDelay: 500, - labelPlacement: LabelPlacement.betweenTicks, - dateIntervalType: DateIntervalType.months, - controller: rangeController, - showTicks: true, - showLabels: true, - dragMode: SliderDragMode.both, - labelFormatterCallback: - (dynamic actualLabel, String formattedText) { - String label = DateFormat.MMM().format(actualLabel); - label = label; - return label; - }, - onChanged: (SfRangeValues values) {}, - child: Container( - child: splineAreaChart, - height: 75, - padding: const EdgeInsets.all(0), - margin: const EdgeInsets.all(0), - ), + margin: const EdgeInsets.all(0), + padding: const EdgeInsets.all(0), + child: Center( + child: Column( + children: [ + Expanded( + child: Container( + padding: const EdgeInsets.fromLTRB(5, 20, 15, 25), + child: splineChart), + ), + Container( + margin: const EdgeInsets.all(0), + padding: const EdgeInsets.all(0), + child: Center( + child: Padding( + padding: const EdgeInsets.fromLTRB(14, 0, 15, 15), + child: SfRangeSelector( + min: min, + max: max, + interval: 1, + enableDeferredUpdate: true, + deferredUpdateDelay: 500, + labelPlacement: LabelPlacement.betweenTicks, + dateIntervalType: DateIntervalType.months, + controller: rangeController, + showTicks: true, + showLabels: true, + dragMode: SliderDragMode.both, + labelFormatterCallback: + (dynamic actualLabel, String formattedText) { + final String label = DateFormat.MMM().format(actualLabel); + return label; + }, + onChanged: (SfRangeValues values) {}, + child: Container( + child: splineAreaChart, + height: 75, + padding: const EdgeInsets.all(0), + margin: const EdgeInsets.all(0), ), ), ), ), - ], - ), - ) - ); - return Scaffold( - body: Center( - child: Container(height: 400, child: page), - ) - ); + ), + ], + ), + ), + ); + return MaterialApp( + home: Scaffold( + body: Center( + child: Container(height: 400, child: page), + ), + ), + ); + } +} + +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; } {% endhighlight %} diff --git a/Flutter/range-selector/right-to-left.md b/Flutter/range-selector/right-to-left.md index dc3479bc1..9e982cf36 100644 --- a/Flutter/range-selector/right-to-left.md +++ b/Flutter/range-selector/right-to-left.md @@ -2,16 +2,18 @@ layout: post title: RTL in Flutter Range Selector widget | Syncfusion description: Learn here all about the RTL rendering in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Right to Left (RTL) in Flutter Range Selector (SfRangeSelector) +N> RTL is not applicable for the vertical orientation of the range selector. + ## RTL rendering ways -Right to left rendering can be achieved in the following ways: +Right-to-left rendering can be achieved in the following ways: ### Wrapping the SfRangeSelector with Directionality widget @@ -20,31 +22,41 @@ The range selector can be wrapped inside the [`Directionality`](https://api.flut {% tabs %} {% highlight Dart %} -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class RtlDirectionalitySample extends StatefulWidget { + @override + _RtlDirectionalitySampleState createState() => _RtlDirectionalitySampleState(); +} -@override -Widget build(BuildContext context) { - return MaterialApp( +class _RtlDirectionalitySampleState extends State { + SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: Center( - child: SfRangeSelector( - min: 2.0, - max: 10.0, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _initialValues, - child: Container( - color: Colors.pink[200], - height: 150, - ), + body: Directionality( + textDirection: TextDirection.rtl, + child: Center( + child: SfRangeSelector( + min: 2.0, + max: 10.0, + interval: 1, + showLabels: true, + showTicks: true, + initialValues: _initialValues, + child: Container( + color: Colors.pink[200], + height: 150, ), - ) - ), - ) - ); + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -67,35 +79,46 @@ dependencies: {% tabs %} {% highlight Dart %} -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale("fa", "IR"), - ], - locale: Locale("fa", "IR"), - home: Scaffold( - backgroundColor: Colors.white, - body: SfRangeSelector( - min: 2.0, - max: 10.0, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _initialValues, - child: Container( - color: Colors.pink[200], - height: 150, +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class RtlLocaleSample extends StatefulWidget { + @override + _RtlLocaleSampleState createState() => _RtlLocaleSampleState(); +} + +class _RtlLocaleSampleState extends State { + SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: [ + Locale("fa", "IR"), + ], + locale: Locale("fa", "IR"), + home: Scaffold( + backgroundColor: Colors.white, + body: SfRangeSelector( + min: 2.0, + max: 10.0, + interval: 1, + showLabels: true, + showTicks: true, + initialValues: _initialValues, + child: Container( + color: Colors.pink[200], + height: 150, + ), ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/range-selector/shapes.md b/Flutter/range-selector/shapes.md index 7db7cdf6a..a0c389b5e 100644 --- a/Flutter/range-selector/shapes.md +++ b/Flutter/range-selector/shapes.md @@ -2,14 +2,14 @@ layout: post title: Custom shapes in Flutter Range Selector widget | Syncfusion description: Learn here all about adding the custom shapes in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Shapes in Flutter Range Selector (SfRangeSelector) -This section helps to learn about how to customize the shapes of the range selector elements. +This section explains how to customize the shapes of the range selector elements. ## Track shape @@ -18,64 +18,78 @@ You can change the size and shape of the track using the [`trackShape`](https:// * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the track shape. -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider track. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector track. +N> You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the paint override method for customizing the range selector track. {% tabs %} {% highlight Dart %} -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(3.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 Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - ), - child: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - trackShape: _TrackShape(), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], +import 'dart:math' as math; + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TrackShapeSample extends StatefulWidget { + @override + _TrackShapeSampleState createState() => _TrackShapeSampleState(); +} + +class _TrackShapeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(3.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + ), + child: SfRangeSelector( + min: _min, + max: _max, + initialValues: _values, + trackShape: _TrackShape(), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), ), ), ), ), ), - ); + ); + } } class Data { @@ -85,6 +99,7 @@ class Data { } class _TrackShape extends SfTrackShape { + @override void paint(PaintingContext context, Offset offset, Offset? thumbCenter, Offset? startThumbCenter, Offset? endThumbCenter, {required RenderBox parentBox, @@ -121,33 +136,42 @@ You can change the size and shape of the thumb using the [`thumbShape`](https:// * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the thumb shape. -N> -* You must use the `currentValue` parameter of paint override method for customizing slider thumb. -* You must use the `currentValues` parameter of paint override method for customizing range slider and range selector thumbs. +N> You must use the `currentValues` parameter of the paint override method for customizing the range selector thumbs. {% tabs %} {% highlight Dart %} -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ThumbShapeSample extends StatefulWidget { + @override + _ThumbShapeSampleState createState() => _ThumbShapeSampleState(); +} + +class _ThumbShapeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( data: SfRangeSelectorThemeData(overlayColor: Colors.transparent), @@ -177,7 +201,8 @@ Widget build(BuildContext context) { ), ), ), - ); + ); + } } class Data { @@ -187,30 +212,30 @@ class Data { } class _SfThumbShape extends SfThumbShape { - @override - void paint(PaintingContext context, Offset center, - {required RenderBox parentBox, - required RenderBox? child, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Paint? paint, - required Animation enableAnimation, - required TextDirection textDirection, - required SfThumb? thumb}) { - final Path path = Path(); - - path.moveTo(center.dx, center.dy); - path.lineTo(center.dx + 10, center.dy - 15); - path.lineTo(center.dx - 10, center.dy - 15); - path.close(); - context.canvas.drawPath( - path, - Paint() - ..color = themeData.activeTrackColor! - ..style = PaintingStyle.fill - ..strokeWidth = 2); - } + @override + void paint(PaintingContext context, Offset center, + {required RenderBox parentBox, + required RenderBox? child, + required SfSliderThemeData themeData, + SfRangeValues? currentValues, + dynamic currentValue, + required Paint? paint, + required Animation enableAnimation, + required TextDirection textDirection, + required SfThumb? thumb}) { + final Path path = Path(); + + path.moveTo(center.dx, center.dy); + path.lineTo(center.dx + 10, center.dy - 15); + path.lineTo(center.dx - 10, center.dy - 15); + path.close(); + context.canvas.drawPath( + path, + Paint() + ..color = themeData.activeTrackColor! + ..style = PaintingStyle.fill + ..strokeWidth = 2); + } } {% endhighlight %} @@ -225,34 +250,42 @@ You can change the size and shape of the divider using the [`dividerShape`](http * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the divider shape. -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider divider. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector divider. +N> You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the paint override method for customizing the range selector divider. {% tabs %} {% highlight Dart %} -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DividerShapeSample extends StatefulWidget { + @override + _DividerShapeSampleState createState() => _DividerShapeSampleState(); +} + +class _DividerShapeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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, @@ -280,7 +313,8 @@ Widget build(BuildContext context) { ), ), ), - ); + ); + } } class Data { @@ -323,34 +357,44 @@ You can change the size and shape of the major and minor ticks using the [`tickS * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the ticks shape. -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider ticks. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector ticks. +N> You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the paint override method for customizing the range selector ticks. {% tabs %} {% highlight Dart %} -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'dart:math' as math; + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TicksShapeSample extends StatefulWidget { + @override + _TicksShapeSampleState createState() => _TicksShapeSampleState(); +} + +class _TicksShapeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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, @@ -380,7 +424,8 @@ Widget build(BuildContext context) { ), ), ), - ); + ); + } } class Data { @@ -390,92 +435,92 @@ class Data { } class _TickShape extends SfTickShape { - @override - void paint(PaintingContext context, Offset offset, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Animation enableAnimation, - required TextDirection textDirection}) { - final Size tickSize = getPreferredSize(themeData); - final bool isTickRightOfThumb = endThumbCenter == null - ? offset.dx > thumbCenter!.dx - : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter.dx; - final Color begin = isTickRightOfThumb - ? themeData.disabledInactiveTickColor - : themeData.disabledActiveTickColor; - final Color end = isTickRightOfThumb - ? themeData.inactiveTickColor - : themeData.activeTickColor; - final Paint paint = Paint() - ..isAntiAlias = true - ..strokeWidth = tickSize.width - ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; - context.canvas.drawLine( - offset, Offset(offset.dx, offset.dy + tickSize.height), paint); - context.canvas.drawLine( - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight)), - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight) - - tickSize.height), - paint); - } + @override + void paint(PaintingContext context, Offset offset, Offset? thumbCenter, + Offset? startThumbCenter, Offset? endThumbCenter, + {required RenderBox parentBox, + required SfSliderThemeData themeData, + SfRangeValues? currentValues, + dynamic currentValue, + required Animation enableAnimation, + required TextDirection textDirection}) { + final Size tickSize = getPreferredSize(themeData); + final bool isTickRightOfThumb = endThumbCenter == null + ? offset.dx > thumbCenter!.dx + : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter!.dx; + final Color begin = isTickRightOfThumb + ? themeData.disabledInactiveTickColor + : themeData.disabledActiveTickColor; + final Color end = isTickRightOfThumb + ? themeData.inactiveTickColor + : themeData.activeTickColor; + final Paint paint = Paint() + ..isAntiAlias = true + ..strokeWidth = tickSize.width + ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; + context.canvas.drawLine( + offset, Offset(offset.dx, offset.dy + tickSize.height), paint); + context.canvas.drawLine( + Offset( + offset.dx, + offset.dy - + 2 - + math.max(themeData.activeTrackHeight, + themeData.inactiveTrackHeight)), + Offset( + offset.dx, + offset.dy - + 2 - + math.max(themeData.activeTrackHeight, + themeData.inactiveTrackHeight) - + tickSize.height), + paint); + } } class _MinorTickShape extends SfTickShape { - @override - void paint(PaintingContext context, Offset offset, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Animation enableAnimation, - required TextDirection textDirection}) { - final Size minorTickSize = getPreferredSize(themeData); - final bool isMinorTickRightOfThumb = endThumbCenter == null - ? offset.dx > thumbCenter!.dx - : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter.dx; - - final Color begin = isMinorTickRightOfThumb - ? themeData.disabledInactiveMinorTickColor - : themeData.disabledActiveMinorTickColor; - final Color end = isMinorTickRightOfThumb - ? themeData.inactiveMinorTickColor - : themeData.activeMinorTickColor; - final Paint paint = Paint() - ..isAntiAlias = true - ..strokeWidth = minorTickSize.width - ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; - context.canvas.drawLine( - offset, Offset(offset.dx, offset.dy + minorTickSize.height), paint); - context.canvas.drawLine( - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight)), - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight) - - minorTickSize.height), - paint); - } + @override + void paint(PaintingContext context, Offset offset, Offset? thumbCenter, + Offset? startThumbCenter, Offset? endThumbCenter, + {required RenderBox parentBox, + required SfSliderThemeData themeData, + SfRangeValues? currentValues, + dynamic currentValue, + required Animation enableAnimation, + required TextDirection textDirection}) { + final Size minorTickSize = getPreferredSize(themeData); + final bool isMinorTickRightOfThumb = endThumbCenter == null + ? offset.dx > thumbCenter!.dx + : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter!.dx; + + final Color begin = isMinorTickRightOfThumb + ? themeData.disabledInactiveMinorTickColor + : themeData.disabledActiveMinorTickColor; + final Color end = isMinorTickRightOfThumb + ? themeData.inactiveMinorTickColor + : themeData.activeMinorTickColor; + final Paint paint = Paint() + ..isAntiAlias = true + ..strokeWidth = minorTickSize.width + ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; + context.canvas.drawLine( + offset, Offset(offset.dx, offset.dy + minorTickSize.height), paint); + context.canvas.drawLine( + Offset( + offset.dx, + offset.dy - + 2 - + math.max(themeData.activeTrackHeight, + themeData.inactiveTrackHeight)), + Offset( + offset.dx, + offset.dy - + 2 - + math.max(themeData.activeTrackHeight, + themeData.inactiveTrackHeight) - + minorTickSize.height), + paint); + } } {% endhighlight %} diff --git a/Flutter/range-selector/thumb-and-overlay.md b/Flutter/range-selector/thumb-and-overlay.md index fa786568f..f175ea3eb 100644 --- a/Flutter/range-selector/thumb-and-overlay.md +++ b/Flutter/range-selector/thumb-and-overlay.md @@ -1,84 +1,32 @@ --- layout: post title: Thumb in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the thumb and thumb overlay features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +description: Learn here all about adding the thumb and thumb overlay features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. +platform: flutter control: SfRangeSelector documentation: ug --- # Thumb and Thumb overlay in Flutter Range Selector (SfRangeSelector) -This section helps to learn about how to customize the thumb and thumb overlay in the range selector. +This section explains how to customize the thumb and thumb overlay in the range selector. + +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). All the examples in this section use `SfRangeSelectorTheme` to customize the thumb and thumb overlay. * **Thumb** - It is one of the elements of range selector which can be used to drag and change the selected values of the range selector. -* **Thumb overlay** - It is rendered around the thumb while interacting with them. +* **Thumb overlay** - It is rendered around the thumb while interacting with it. ## Thumb size You can change the size of the thumb in the range selector using the [`thumbRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbRadius.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbRadius: 13, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -86,6 +34,67 @@ class Data { final double y; } +class ThumbSizeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + thumbRadius: 13, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -95,67 +104,13 @@ class Data { You can change the color of the thumb in the range selector using the [`thumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -163,6 +118,67 @@ class Data { final double y; } +class ThumbColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + thumbColor: Colors.red, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -172,73 +188,80 @@ class Data { You can change the thumb stroke width using the [`thumbStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeWidth.html) property and thumb stroke color using the [`thumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class Data { + Data({required this.x, required this.y}); + final double x; + final double y; +} + +class ThumbStrokeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], + child: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + thumbStrokeWidth: 3, + thumbStrokeColor: Colors.red, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), ), ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; + ), + ), + ), + ); + } } {% endhighlight %} @@ -253,73 +276,10 @@ You can show the custom widgets like icon or text inside the thumbs using the [` {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - startThumbIcon: Icon( - Icons.arrow_back_ios, - color: Colors.blue, - size: 20.0), - endThumbIcon: Icon( - Icons.arrow_forward_ios, - color: Colors.blue, - size: 20.0), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -327,6 +287,77 @@ class Data { final double y; } +class ThumbIconSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + thumbColor: Colors.white, + thumbRadius: 15, + thumbStrokeWidth: 2, + thumbStrokeColor: Colors.blue), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: true, + initialValues: _values, + startThumbIcon: const Icon( + Icons.arrow_back_ios, + color: Colors.blue, + size: 20.0), + endThumbIcon: const Icon( + Icons.arrow_forward_ios, + color: Colors.blue, + size: 20.0), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -336,67 +367,13 @@ class Data { You can change the size of the thumb overlay in the range selector using the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayRadius.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlayRadius: 25, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -404,6 +381,67 @@ class Data { final double y; } +class ThumbOverlaySizeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + overlayRadius: 25, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -413,67 +451,13 @@ class Data { You can change the color of the thumb overlay in the range selector using the [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlayColor: Colors.red[50], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -481,6 +465,67 @@ class Data { final double y; } +class ThumbOverlayColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + overlayColor: Colors.red[50], + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -490,67 +535,13 @@ class Data { You can change the overlap stroke color of the thumb in the range selector using the [`overlappingThumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingThumbStrokeColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlappingThumbStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -558,6 +549,67 @@ class Data { final double y; } +class ThumbOverlapStrokeColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + overlappingThumbStrokeColor: Colors.red, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/ticks.md b/Flutter/range-selector/ticks.md index 7f0dd33d8..1345286b3 100644 --- a/Flutter/range-selector/ticks.md +++ b/Flutter/range-selector/ticks.md @@ -2,29 +2,42 @@ layout: post title: Tick in Flutter Range Selector widget | Syncfusion description: Learn here all about adding the Ticks feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Ticks in Flutter Range Selector (SfRangeSelector) -This section helps to learn about how to add major and minor ticks in the range selector. +This section explains how to add major and minor ticks in the range selector. ## Show major ticks -You can enable the major ticks on the track. It is a shape which is used to represent the major interval points of the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. +You can enable the major ticks on the track. It is a shape used to mark the major interval points on the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the major ticks at 0.0, 2.0, 4.0 and so on. {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List chartData = [ +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +class ShowMajorTicksSample extends StatelessWidget { + final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); + final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); + final SfRangeValues _values = SfRangeValues( + DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); + + final List chartData = [ Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), @@ -34,51 +47,47 @@ final List chartData = [ Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; + ]; -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 2, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; + ), + ), + ), + ), + ); + } } {% endhighlight %} @@ -97,58 +106,9 @@ I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/ {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: 2, - showLabels: true, - showTicks: true, - minorTicksPerInterval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} +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}); @@ -156,6 +116,63 @@ class Data { final double y; } +class ShowMinorTicksSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: 2, + showLabels: true, + showTicks: true, + minorTicksPerInterval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -167,75 +184,23 @@ N> ## Major ticks color -You can change the active and inactive major ticks color of the range selector using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTickColor.html) properties respectively. +You can change the active and inactive major ticks color of the range selector using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTickColor.html) properties respectively. The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). This applies to all the theme-based examples in this section. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -243,6 +208,67 @@ class Data { final double y; } +class MajorTicksColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTickColor: Colors.red, + inactiveTickColor: Colors.red[100], + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -250,76 +276,21 @@ class Data { ## Minor ticks color -You can change the active and inactive minor ticks color of the range selector using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveMinorTickColor.html) properties respectively. +You can change the active and inactive minor ticks color of the range selector using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveMinorTickColor.html) properties respectively. The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -327,77 +298,84 @@ class Data { final double y; } +class MinorTicksColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeMinorTickColor: Colors.red, + inactiveMinorTickColor: Colors.red[200], + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 2, + minorTicksPerInterval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} ![Minor ticks support](images/tick/selector-minor-tick.png) -## Ticks size - -You can change the major and minor ticks size of the range selector using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/minorTickSize.html) properties respectively. The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`. +## Tick size -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +You can change the major and minor ticks size of the range selector using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) properties respectively. The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tickSize: Size(3.0, 12.0), - minorTickSize: Size(3.0, 8.0), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -405,6 +383,68 @@ class Data { final double y; } +class TickSizeSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + tickSize: Size(3.0, 12.0), + minorTickSize: Size(3.0, 8.0), + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 2, + minorTicksPerInterval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -412,69 +452,15 @@ class Data { ## Ticks offset -You can adjust the space between track and ticks of the range selector using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickOffset.html) property in the [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickOffset.html) property is `null`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +You can adjust the space between track and ticks of the range selector using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property in the [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property is `null`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tickOffset: Offset(0.0, 10.0), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -482,6 +468,67 @@ class Data { final double y; } +class TickOffsetSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + tickOffset: Offset(0.0, 10.0), + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 2, + minorTicksPerInterval: 1, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} diff --git a/Flutter/range-selector/tooltip.md b/Flutter/range-selector/tooltip.md index 4563666f1..20c5c5e5e 100644 --- a/Flutter/range-selector/tooltip.md +++ b/Flutter/range-selector/tooltip.md @@ -2,75 +2,88 @@ layout: post title: Tooltip in Flutter Range Selector widget | Syncfusion description: Learn here all about adding the Tooltip feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Tooltip in Flutter Range Selector (SfRangeSelector) -This section helps to learn about how to add tooltip in the range selector. +This section explains how to add tooltips in the range selector. ## Enable tooltips -You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). +You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html) property. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the range selector thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html) behavior. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipSample extends StatefulWidget { + @override + _TooltipSampleState createState() => _TooltipSampleState(); +} + +class _TooltipSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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: 2, - showLabels: true, - showTicks: true, - enableTooltip: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + interval: 2, + showLabels: true, + showTicks: true, + enableTooltip: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -95,58 +108,71 @@ You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](h {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipShapeSample extends StatefulWidget { + @override + _TooltipShapeSampleState createState() => _TooltipShapeSampleState(); +} + +class _TooltipShapeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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, - enableTooltip: true, - tooltipShape: SfPaddleTooltipShape(), - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + showLabels: true, + showTicks: true, + enableTooltip: true, + tooltipShape: SfPaddleTooltipShape(), + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), ), - ) - ) - ); + ), + ), + ), + ); + } } class Data { @@ -172,11 +198,23 @@ You can format or change the whole tooltip label text using the [`tooltipTextFor {% tabs %} {% highlight Dart %} -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -final List chartData = [ +class TooltipTextFormatSample extends StatefulWidget { + @override + _TooltipTextFormatSampleState createState() => _TooltipTextFormatSampleState(); +} + +class _TooltipTextFormatSampleState extends State { + final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); + final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); + SfRangeValues _values = SfRangeValues( + DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); + + final List chartData = [ Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), @@ -186,49 +224,52 @@ final List chartData = [ Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; + ]; -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - enableTooltip: true, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 2, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + enableTooltip: true, + tooltipTextFormatterCallback: + (dynamic actualValue, String formattedText) { + return DateFormat('h:mm a').format(actualValue); + }, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -251,62 +292,76 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipColorSample extends StatefulWidget { + @override + _TooltipColorSampleState createState() => _TooltipColorSampleState(); +} + +class _TooltipColorSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), + body: Center( + child: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + tooltipBackgroundColor: Colors.red[300], + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + enableTooltip: true, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -329,62 +384,79 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipLabelStyleSample extends StatefulWidget { + @override + _TooltipLabelStyleSampleState createState() => _TooltipLabelStyleSampleState(); +} + +class _TooltipLabelStyleSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), + body: Center( + child: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + tooltipTextStyle: TextStyle( + color: Colors.red, + fontSize: 16, + fontStyle: FontStyle.italic), + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + enableTooltip: true, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { @@ -407,62 +479,77 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.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( +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipOverlapStrokeSample extends StatefulWidget { + @override + _TooltipOverlapStrokeSampleState createState() => + _TooltipOverlapStrokeSampleState(); +} + +class _TooltipOverlapStrokeSampleState extends State { + final double _min = 2.0; + final double _max = 10.0; + SfRangeValues _values = SfRangeValues(4.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlappingTooltipStrokeColor: Colors.white, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), + body: Center( + child: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + overlappingTooltipStrokeColor: Colors.white, + ), + child: SfRangeSelector( + min: _min, + max: _max, + interval: 1, + enableTooltip: true, + showTicks: true, + showLabels: 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), ), - ) - ) - ); + ), + ), + ), + ), + ); + } } class Data { diff --git a/Flutter/range-selector/track.md b/Flutter/range-selector/track.md index f75c8071b..54bf22e3c 100644 --- a/Flutter/range-selector/track.md +++ b/Flutter/range-selector/track.md @@ -2,84 +2,34 @@ layout: post title: Track in Flutter Range Selector widget | Syncfusion description: Learn here all about adding the Track feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: Flutter +platform: flutter control: SfRangeSelector documentation: ug --- # Track in Flutter Range Selector (SfRangeSelector) -This section helps to learn about how to customize the track in the range selector. +This section explains how to customize the track in the range selector. ## Track color -You can change the active and inactive track color of the range selector using the [`activeTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackColor.html) and [`inactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackColor.html) properties respectively. +You can change the active and inactive track color of the range selector using the [`activeTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackColor.html) and [`inactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackColor.html) properties respectively. The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. +The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -87,6 +37,65 @@ class Data { final double y; } +class TrackColorSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackColor: Colors.red, + inactiveTrackColor: Colors.red[100], + ), + child: SfRangeSelector( + min: _min, + max: _max, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -94,67 +103,15 @@ class Data { ## Track height -You can change the track height of the range selector using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackHeight.html) properties. The default value of the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackHeight.html) properties are `6.0` and `4.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +You can change the track height of the range selector using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackHeight.html) properties. The default value of the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackHeight.html) properties are `6.0` and `4.0`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfRangeSelector( - min: _min, - max: _max, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -162,6 +119,65 @@ class Data { final double y; } +class TrackHeightSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 8, + inactiveTrackHeight: 8, + ), + child: SfRangeSelector( + min: _min, + max: _max, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} @@ -169,68 +185,15 @@ class Data { ## Track corner radius -You can change the corner of the track to be round in the range selector using the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/trackCornerRadius.html) property. The default value of the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/trackCornerRadius.html) property is `1.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). +You can change the corner of the track to be round in the range selector using the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/trackCornerRadius.html) property. The default value of the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/trackCornerRadius.html) property is `1.0`. {% tabs %} {% highlight Dart %} -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfRangeSelector( - min: _min, - max: _max, - 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( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; class Data { Data({required this.x, required this.y}); @@ -238,6 +201,66 @@ class Data { final double y; } +class TrackCornerRadiusSample extends StatelessWidget { + final double _min = 2.0; + final double _max = 10.0; + final SfRangeValues _values = SfRangeValues(4.0, 7.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: SfRangeSelectorTheme( + data: SfRangeSelectorThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + trackCornerRadius: 5, + ), + child: SfRangeSelector( + min: _min, + max: _max, + 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( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ), + ), + ), + ); + } +} + {% endhighlight %} {% endtabs %} From f1cc720e20f27bdfcb41e4186f2fef5f33237240 Mon Sep 17 00:00:00 2001 From: Harsha-SF4223 <154403270+Harsha-SF4223@users.noreply.github.com> Date: Tue, 4 Aug 2026 15:15:25 +0530 Subject: [PATCH 2/2] reverted FlutterFlow changes --- Flutter/range-selector/how-to/custom-widget-on-flutterflow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md b/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md index 4f23473d8..acd8376b1 100644 --- a/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/range-selector/how-to/custom-widget-on-flutterflow.md @@ -7,7 +7,7 @@ control: SfRangeSelector documentation: ug --- -# How to add Syncfusion® RangeSelector widget in Flutter? +# How to add Syncfusion® RangeSelector widget in FlutterFlow? ## Overview