From 8f8ef5a724febf8133eac69a3acd219ac4323c02 Mon Sep 17 00:00:00 2001 From: HarshaMidadhalaKhajareddyMidadhala Date: Wed, 29 Jul 2026 14:07:53 +0530 Subject: [PATCH] Updated slider UG --- Flutter/slider/accessibility.md | 136 +- Flutter/slider/basic-features.md | 672 +++--- Flutter/slider/enabled-and-disabled-state.md | 350 ++-- Flutter/slider/getting-started.md | 742 ++++--- .../how-to/custom-widget-on-flutterflow.md | 12 +- ...e-snippent.png => Adding-code-snippet.png} | Bin Flutter/slider/interval.md | 490 +++-- Flutter/slider/labels-and-divider.md | 1832 ++++++++++------- Flutter/slider/overview.md | 16 +- Flutter/slider/right-to-left.md | 143 +- Flutter/slider/shapes.md | 214 +- Flutter/slider/thumb-and-overlay.md | 830 ++++---- Flutter/slider/ticks.md | 796 ++++--- Flutter/slider/tooltip.md | 658 +++--- Flutter/slider/track.md | 396 ++-- 15 files changed, 4264 insertions(+), 3023 deletions(-) rename Flutter/slider/how-to/how-to-section-images/{Adding-code-snippent.png => Adding-code-snippet.png} (100%) diff --git a/Flutter/slider/accessibility.md b/Flutter/slider/accessibility.md index 5d0091b3e..df99afd38 100644 --- a/Flutter/slider/accessibility.md +++ b/Flutter/slider/accessibility.md @@ -1,8 +1,8 @@ --- layout: post -title: Accessibility in Flutter Slider widget | Syncfusion +title: Accessibility in Flutter Slider widget | Syncfusion description: Learn here all about the accessibility support in Syncfusion Flutter Slider (SfSlider) widget and how to customize the text. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Keyboard support -This feature allows you to focus on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. The left and down arrow keys can be used to decrease the thumb value, while the right and up arrow keys can be used to increase it. +This feature allows you to focus on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. The left and down arrow keys can be used to decrease the thumb value, while the right and up arrow keys can be used to increase it. The value changes by the [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepSize.html) (for numeric values) or [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepDuration.html) (for date values) per key press. ## Screen reader @@ -26,32 +26,42 @@ For iOS, you can adjust the value of the thumb by moving the focus to it and the {% tabs %} {% highlight Dart %} -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 100.0, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value){ - return 'The selected value is $value'; - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class AccessibilityPage extends StatefulWidget { + @override + _AccessibilityPageState createState() => _AccessibilityPageState(); +} + +class _AccessibilityPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 100.0, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + semanticFormatterCallback: (double value){ + return 'The selected value is $value'; + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ), + ); + } } {% endhighlight %} @@ -62,32 +72,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 100.0, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value){ - return 'The selected value is $value'; - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalAccessibilityPage extends StatefulWidget { + @override + _VerticalAccessibilityPageState createState() => _VerticalAccessibilityPageState(); +} + +class _VerticalAccessibilityPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 100.0, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + semanticFormatterCallback: (double value){ + return 'The selected value is $value'; + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ), + ); + } } {% endhighlight %} @@ -101,7 +121,7 @@ You can customize the color of the [`SfSlider`](https://pub.dev/documentation/sy * [`Major ticks`](https://help.syncfusion.com/flutter/slider/ticks#major-ticks-color) * [`Minor ticks`](https://help.syncfusion.com/flutter/slider/ticks#minor-ticks-color) * [`Labels`](https://help.syncfusion.com/flutter/slider/labels-and-divider#show-labels) -* [`Dividers`](https://help.syncfusion.com/flutter/slider/labels-and-divider#show-dividers) +* [`Dividers`](https://help.syncfusion.com/flutter/slider/labels-and-divider#divider-color) * [`Thumb`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-color) * [`Thumb overlay`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-overlay-color) @@ -112,6 +132,6 @@ The font size of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutt * [`Label style`](https://help.syncfusion.com/flutter/slider/labels-and-divider#label-style) * [`Tooltip label style`](https://help.syncfusion.com/flutter/slider/tooltip#tooltip-label-style) -## Easier touch targets +## Touch targets -The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) has touch target as 48 * 48 as per the standard for all the elements. +The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) has a touch target of 48 × 48 pixels as per the standard for all the elements. diff --git a/Flutter/slider/basic-features.md b/Flutter/slider/basic-features.md index 44a1895b1..95df8195f 100644 --- a/Flutter/slider/basic-features.md +++ b/Flutter/slider/basic-features.md @@ -33,28 +33,38 @@ You can show numeric values in the slider by setting `double` values to the [`mi {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class NumericSliderPage extends StatefulWidget { + @override + _NumericSliderPageState createState() => _NumericSliderPageState(); +} + +class _NumericSliderPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -67,28 +77,38 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalNumericSliderPage extends StatefulWidget { + @override + _VerticalNumericSliderPageState createState() => _VerticalNumericSliderPageState(); +} + +class _VerticalNumericSliderPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -107,30 +127,41 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DateSliderPage extends StatefulWidget { + @override + _DateSliderPageState createState() => _DateSliderPageState(); +} + +class _DateSliderPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -143,30 +174,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalDateSliderPage extends StatefulWidget { + @override + _VerticalDateSliderPageState createState() => _VerticalDateSliderPageState(); +} + +class _VerticalDateSliderPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -178,30 +220,40 @@ Widget build(BuildContext context) { **onChangeStart** -The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeStart.html) callback is called when the user begins to interact with slider 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 slider thumb. +The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeStart.html) callback is called when the user begins to interact with the slider 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 slider thumb. {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChangeStart: (dynamic startValue) { - print('Interaction started'); - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class OnChangeStartPage extends StatefulWidget { + @override + _OnChangeStartPageState createState() => _OnChangeStartPageState(); +} + +class _OnChangeStartPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChangeStart: (double startValue) { + debugPrint('Interaction started'); + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ); + } } {% endhighlight %} @@ -209,30 +261,40 @@ Widget build(BuildContext context) { **onChangeEnd** -The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeEnd.html) callback is called when the user stops to interact with slider 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 slider thumb. +The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeEnd.html) callback is called when the user stops interacting with the slider 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 slider thumb. {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - onChangeEnd: (dynamic endValue) { - print('Interaction ended'); - }, - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class OnChangeEndPage extends StatefulWidget { + @override + _OnChangeEndPageState createState() => _OnChangeEndPageState(); +} + +class _OnChangeEndPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + onChangeEnd: (double endValue) { + debugPrint('Interaction ended'); + }, + ), + ); + } } {% endhighlight %} @@ -242,7 +304,7 @@ Widget build(BuildContext context) { The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback is called when the user selects a value through interaction. -N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with new value. +N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with the new value. N> If it is null, the slider will be disabled. @@ -251,26 +313,36 @@ N> If it is null, the slider will be disabled. {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class OnChangedPage extends StatefulWidget { + @override + _OnChangedPageState createState() => _OnChangedPageState(); +} + +class _OnChangedPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -283,26 +355,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalOnChangedPage extends StatefulWidget { + @override + _VerticalOnChangedPageState createState() => _VerticalOnChangedPageState(); +} + +class _VerticalOnChangedPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -319,31 +401,41 @@ It represents the color applied to the active track, thumb, overlay, and inactiv {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ActiveColorPage extends StatefulWidget { + @override + _ActiveColorPageState createState() => _ActiveColorPageState(); +} + +class _ActiveColorPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -356,31 +448,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalActiveColorPage extends StatefulWidget { + @override + _VerticalActiveColorPageState createState() => _VerticalActiveColorPageState(); +} + +class _VerticalActiveColorPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -399,32 +501,42 @@ The inactive side of the slider is between the thumb and the [`max`](https://pub {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class InactiveColorPage extends StatefulWidget { + @override + _InactiveColorPageState createState() => _InactiveColorPageState(); +} + +class _InactiveColorPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + inactiveColor: Colors.red.withValues(alpha: 0.2), + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -437,32 +549,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalInactiveColorPage extends StatefulWidget { + @override + _VerticalInactiveColorPageState createState() => _VerticalInactiveColorPageState(); +} + +class _VerticalInactiveColorPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + inactiveColor: Colors.red.withValues(alpha: 0.2), + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/enabled-and-disabled-state.md b/Flutter/slider/enabled-and-disabled-state.md index ffa7b8d72..f524716a1 100644 --- a/Flutter/slider/enabled-and-disabled-state.md +++ b/Flutter/slider/enabled-and-disabled-state.md @@ -1,15 +1,15 @@ --- layout: post -title: Enable & disable states in Flutter Slider widget | Syncfusion +title: Enabled and Disabled States in Flutter Slider | Syncfusion description: Learn here all about the enabled and disabled states of the Syncfusion Flutter Slider (SfSlider) widget and how to customize them. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- -# Enabled and disabled states in Flutter Slider (SfSlider) +# Enabled and Disabled States in Flutter Slider (SfSlider) -This section helps to learn about the enabled and disabled state in the Flutter slider. +This section explains the enabled and disabled states in the Flutter slider. ## Enabled state @@ -20,26 +20,36 @@ The slider will be in enabled state if [`onChanged`](https://pub.dev/documentati {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class EnabledStatePage extends StatefulWidget { + @override + _EnabledStatePageState createState() => _EnabledStatePageState(); +} + +class _EnabledStatePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -52,26 +62,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalEnabledStatePage extends StatefulWidget { + @override + _VerticalEnabledStatePageState createState() => _VerticalEnabledStatePageState(); +} + +class _VerticalEnabledStatePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -89,22 +109,32 @@ The slider will be in disabled state if [`onChanged`](https://pub.dev/documentat {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: null, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DisabledStatePage extends StatefulWidget { + @override + _DisabledStatePageState createState() => _DisabledStatePageState(); +} + +class _DisabledStatePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: null, + ) + ) + ) + ); + } } {% endhighlight %} @@ -117,22 +147,32 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - onChanged: null, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalDisabledStatePage extends StatefulWidget { + @override + _VerticalDisabledStatePageState createState() => _VerticalDisabledStatePageState(); +} + +class _VerticalDisabledStatePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + onChanged: null, + ) + ) + ) + ); + } } {% endhighlight %} @@ -143,7 +183,7 @@ Widget build(BuildContext context) { ## 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. @@ -151,46 +191,55 @@ You can change, * 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. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - disabledActiveTrackColor: Colors.orange, - disabledInactiveTrackColor: Colors.orange[200], - disabledActiveTickColor: Colors.orange, - disabledInactiveTickColor: Colors.orange[200], - disabledActiveMinorTickColor: Colors.orange, - disabledInactiveMinorTickColor: Colors.orange[200], - disabledActiveDividerColor: Colors.purple, - disabledInactiveDividerColor: Colors.purple[200], - disabledThumbColor: Colors.orange, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showDividers: true, - value: _value, - onChanged: null, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DisabledColorPage extends StatefulWidget { + @override + _DisabledColorPageState createState() => _DisabledColorPageState(); +} + +class _DisabledColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + disabledActiveTrackColor: Colors.orange, + disabledInactiveTrackColor: Colors.orange[200], + disabledActiveTickColor: Colors.orange, + disabledInactiveTickColor: Colors.orange[200], + disabledActiveMinorTickColor: Colors.orange, + disabledInactiveMinorTickColor: Colors.orange[200], + disabledActiveDividerColor: Colors.purple, + disabledInactiveDividerColor: Colors.purple[200], + disabledThumbColor: Colors.orange, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showDividers: true, + value: _value, + onChanged: null, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -203,39 +252,50 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - disabledActiveTrackColor: Colors.orange, - disabledInactiveTrackColor: Colors.orange[200], - disabledActiveTickColor: Colors.orange, - disabledInactiveTickColor: Colors.orange[200], - disabledActiveMinorTickColor: Colors.orange, - disabledInactiveMinorTickColor: Colors.orange[200], - disabledActiveDividerColor: Colors.purple, - disabledInactiveDividerColor: Colors.purple[200], - disabledThumbColor: Colors.orange, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showDividers: true, - value: _value, - onChanged: null, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalDisabledColorPage extends StatefulWidget { + @override + _VerticalDisabledColorPageState createState() => _VerticalDisabledColorPageState(); +} + +class _VerticalDisabledColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + disabledActiveTrackColor: Colors.orange, + disabledInactiveTrackColor: Colors.orange[200], + disabledActiveTickColor: Colors.orange, + disabledInactiveTickColor: Colors.orange[200], + disabledActiveMinorTickColor: Colors.orange, + disabledInactiveMinorTickColor: Colors.orange[200], + disabledActiveDividerColor: Colors.purple, + disabledInactiveDividerColor: Colors.purple[200], + disabledThumbColor: Colors.orange, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showDividers: true, + value: _value, + onChanged: null, + ), + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/getting-started.md b/Flutter/slider/getting-started.md index 944c43391..50e122663 100644 --- a/Flutter/slider/getting-started.md +++ b/Flutter/slider/getting-started.md @@ -10,7 +10,7 @@ documentation: ug # Flutter Slider Getting Started (SfSlider) This section explains the steps required to add the slider widget and its elements such as numeric and date values, ticks, labels, and tooltip. This section covers only basic features needed to get started with Syncfusion® slider. -To get start quickly with our Flutter Slider widget, you can check on this video. +To get started quickly with our Flutter Slider widget, 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 slider 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,33 +60,43 @@ import 'package:syncfusion_flutter_sliders/sliders.dart'; ## Initialize slider -After importing the package, initialize the slider widget as a child of any widget. Here, the slider widget is added as a child of the Center widget. The default value of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) properties of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) is 0.0 and 1.0 respectively. So, the [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) property must be given within the range. +After importing the package, initialize the slider widget as a child of any widget. Here, the slider widget is added as a child of the Center widget. The default value of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) properties of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) are 0.0 and 1.0 respectively. So, the [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) property must be given within the range. -N> The slider passes the new value to the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback but does not change its state until the parent widget rebuilds the slider with new value. +N> The slider passes the new value to the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback but does not change its state until the parent widget rebuilds the slider with the new value. ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 0.5; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider( - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, +class HorizontalSliderPage extends StatefulWidget { + @override + _HorizontalSliderPageState createState() => _HorizontalSliderPageState(); +} + +class _HorizontalSliderPageState extends State { + double _value = 0.5; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider( + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } - + {% endhighlight %} {% endtabs %} @@ -93,22 +107,32 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 0.5; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider.vertical( - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, +class VerticalSliderPage extends StatefulWidget { + @override + _VerticalSliderPageState createState() => _VerticalSliderPageState(); +} + +class _VerticalSliderPageState extends State { + double _value = 0.5; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider.vertical( + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -120,33 +144,43 @@ Widget build(BuildContext context) { The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback is used to get the current value of the slider when the user selects a value through interaction. -N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with new value. +N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with the new value. ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 5.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +class HorizontalHandleValuePage extends StatefulWidget { + @override + _HorizontalHandleValuePageState createState() => _HorizontalHandleValuePageState(); +} + +class _HorizontalHandleValuePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -159,26 +193,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); +class VerticalHandleValuePage extends StatefulWidget { + @override + _VerticalHandleValuePageState createState() => _VerticalHandleValuePageState(); +} + +class _VerticalHandleValuePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); + } } {% endhighlight %} @@ -195,30 +239,40 @@ You can show numeric values in the slider by setting `double` values to the [`mi {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: _min, - max: _max, - value: _value, - interval: 20, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class NumericSliderPage extends StatefulWidget { + @override + _NumericSliderPageState createState() => _NumericSliderPageState(); +} + +class _NumericSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: _min, + max: _max, + value: _value, + interval: 20, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -231,30 +285,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: _min, - max: _max, - value: _value, - interval: 20, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalNumericSliderPage extends StatefulWidget { + @override + _VerticalNumericSliderPageState createState() => _VerticalNumericSliderPageState(); +} + +class _VerticalNumericSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: _min, + max: _max, + value: _value, + interval: 20, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -273,30 +337,41 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -DateTime _min = DateTime(2008, 01, 01); -DateTime _max = DateTime(2018, 01, 01); -DateTime _value = DateTime(2012, 01, 01); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider( - min: _min, - max: _max, - value: _value, - interval: 2, - showLabels: true, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DateSliderPage extends StatefulWidget { + @override + _DateSliderPageState createState() => _DateSliderPageState(); +} + +class _DateSliderPageState extends State { + DateTime _min = DateTime(2008, 01, 01); + DateTime _max = DateTime(2018, 01, 01); + DateTime _value = DateTime(2012, 01, 01); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider( + min: _min, + max: _max, + value: _value, + interval: 2, + showLabels: true, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -309,30 +384,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _min = DateTime(2008, 01, 01); -DateTime _max = DateTime(2018, 01, 01); -DateTime _value = DateTime(2012, 01, 01); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider.vertical( - min: _min, - max: _max, - value: _value, - interval: 2, - showLabels: true, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalDateSliderPage extends StatefulWidget { + @override + _VerticalDateSliderPageState createState() => _VerticalDateSliderPageState(); +} + +class _VerticalDateSliderPageState extends State { + DateTime _min = DateTime(2008, 01, 01); + DateTime _max = DateTime(2018, 01, 01); + DateTime _value = DateTime(2012, 01, 01); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider.vertical( + min: _min, + max: _max, + value: _value, + interval: 2, + showLabels: true, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -349,29 +435,39 @@ You can enable ticks in the slider using the [`showTicks`](https://pub.dev/docum {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider( - min: _min, - max: _max, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TicksSliderPage extends StatefulWidget { + @override + _TicksSliderPageState createState() => _TicksSliderPageState(); +} + +class _TicksSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider( + min: _min, + max: _max, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -384,29 +480,39 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider.vertical( - min: _min, - max: _max, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTicksSliderPage extends StatefulWidget { + @override + _VerticalTicksSliderPageState createState() => _VerticalTicksSliderPageState(); +} + +class _VerticalTicksSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider.vertical( + min: _min, + max: _max, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -421,28 +527,38 @@ You can invert the horizontal slider by wrapping the slider to the [`Directional {% tabs %} {% highlight Dart %} -double _value = 40.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfSlider( - min: 0, - max: 100, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +class InversedHorizontalSliderPage extends StatefulWidget { + @override + _InversedHorizontalSliderPageState createState() => _InversedHorizontalSliderPageState(); +} + +class _InversedHorizontalSliderPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfSlider( + min: 0, + max: 100, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -457,26 +573,36 @@ You can invert the vertical slider using the [`isInversed`](https://pub.dev/docu {% tabs %} {% highlight Dart %} -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider.vertical( - min: 0, - max: 100, - value: _value, - interval: 20, - isInversed: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class InversedVerticalSliderPage extends StatefulWidget { + @override + _InversedVerticalSliderPageState createState() => _InversedVerticalSliderPageState(); +} + +class _InversedVerticalSliderPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfSlider.vertical( + min: 0, + max: 100, + value: _value, + interval: 20, + isInversed: true, + showTicks: true, + showLabels: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ); + } } {% endhighlight %} @@ -497,30 +623,41 @@ I> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider( - min: _min, - max: _max, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class PrefixSuffixSliderPage extends StatefulWidget { + @override + _PrefixSuffixSliderPageState createState() => _PrefixSuffixSliderPageState(); +} + +class _PrefixSuffixSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider( + min: _min, + max: _max, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -533,30 +670,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSlider.vertical( - min: _min, - max: _max, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalPrefixSuffixSliderPage extends StatefulWidget { + @override + _VerticalPrefixSuffixSliderPageState createState() => _VerticalPrefixSuffixSliderPageState(); +} + +class _VerticalPrefixSuffixSliderPageState extends State { + final double _min = 0; + final double _max = 100; + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSlider.vertical( + min: _min, + max: _max, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/slider/how-to/custom-widget-on-flutterflow.md b/Flutter/slider/how-to/custom-widget-on-flutterflow.md index d71b69ea7..62f9c03ee 100644 --- a/Flutter/slider/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/slider/how-to/custom-widget-on-flutterflow.md @@ -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 this icon ![Code Icon](how-to-section-images/custom-widget.png). +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 @@ -73,3 +73,5 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. ![Page](how-to-section-images/page.png) + +>**Note**: To wire the custom widget to data, define input parameters in the custom widget's constructor and map them to FlutterFlow page state variables or component properties. This allows you to pass dynamic values (such as the slider `value`, `min`, and `max`) into the widget from your app's data source. diff --git a/Flutter/slider/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/slider/how-to/how-to-section-images/Adding-code-snippet.png similarity index 100% rename from Flutter/slider/how-to/how-to-section-images/Adding-code-snippent.png rename to Flutter/slider/how-to/how-to-section-images/Adding-code-snippet.png diff --git a/Flutter/slider/interval.md b/Flutter/slider/interval.md index c8256befb..86d45d7fc 100644 --- a/Flutter/slider/interval.md +++ b/Flutter/slider/interval.md @@ -2,13 +2,13 @@ layout: post title: Interval in Flutter Slider widget | Syncfusion description: Learn here all about adding the Interval feature of Syncfusion Flutter Slider (SfSlider) widget and more. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- # Interval in Flutter Slider (SfSlider) -This section explains about how to add the interval for numeric and date slider. +This section explains how to set the interval for numeric and date sliders. ## Numeric interval @@ -21,29 +21,39 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class NumericIntervalPage extends StatefulWidget { + @override + _NumericIntervalPageState createState() => _NumericIntervalPageState(); +} + +class _NumericIntervalPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -56,29 +66,39 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalNumericIntervalPage extends StatefulWidget { + @override + _VerticalNumericIntervalPageState createState() => _VerticalNumericIntervalPageState(); +} + +class _VerticalNumericIntervalPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -99,36 +119,49 @@ For date values, the slider does not have auto interval support. So, it is manda For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is `DateTime(2000, 01, 01)` and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is `DateTime(2005, 01, 01)` and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html) is `1`, [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateIntervalType.html) is `DateIntervalType.years`, [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) is `DateFormat.y()` then the slider will render the labels, major ticks, and dividers at 2000, 2001, 2002 and so on. +N> You must import the [`intl`](https://pub.dev/packages/intl) package for formatting date slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. + ### Horizontal {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DateIntervalPage extends StatefulWidget { + @override + _DateIntervalPageState createState() => _DateIntervalPageState(); +} + +class _DateIntervalPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -141,31 +174,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalDateIntervalPage extends StatefulWidget { + @override + _VerticalDateIntervalPageState createState() => _VerticalDateIntervalPageState(); +} + +class _VerticalDateIntervalPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -182,31 +226,41 @@ You can move the thumb in discrete manner for numeric values using the [`stepSiz {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - stepSize: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class StepSizePage extends StatefulWidget { + @override + _StepSizePageState createState() => _StepSizePageState(); +} + +class _StepSizePageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + stepSize: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -219,31 +273,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - stepSize: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalStepSizePage extends StatefulWidget { + @override + _VerticalStepSizePageState createState() => _VerticalStepSizePageState(); +} + +class _VerticalStepSizePageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + stepSize: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -253,39 +317,52 @@ Widget build(BuildContext context) { You can move the thumb in discrete manner for date values using the [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepDuration.html) property in the slider. -For example, if [min](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is DateTime(2015, 01, 01) and [max](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is DateTime(2020, 01, 01) and [stepDuration](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepDuration.html) is SliderDuration(years: 1, months: 6),the slider will move the thumbs at DateTime(2015, 01, 01), DateTime(2016, 07, 01), DateTime(2018, 01, 01),and DateTime(2019, 07, 01). +N> You must import the [`intl`](https://pub.dev/packages/intl) package for formatting date slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. + +For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is `DateTime(2015, 01, 01)` and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is `DateTime(2020, 01, 01)` and [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepDuration.html) is `SliderStepDuration(years: 1, months: 6)`, the slider will move the thumb at `DateTime(2015, 01, 01)`, `DateTime(2016, 07, 01)`, `DateTime(2018, 01, 01)`, and `DateTime(2019, 07, 01)`. ### Horizontal {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2004, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - stepDuration: SliderStepDuration(years: 2), - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class StepDurationPage extends StatefulWidget { + @override + _StepDurationPageState createState() => _StepDurationPageState(); +} + +class _StepDurationPageState extends State { + DateTime _value = DateTime(2004, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + stepDuration: SliderStepDuration(years: 2), + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -298,32 +375,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2004, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - stepDuration: SliderStepDuration(years: 2), - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalStepDurationPage extends StatefulWidget { + @override + _VerticalStepDurationPageState createState() => _VerticalStepDurationPageState(); +} + +class _VerticalStepDurationPageState extends State { + DateTime _value = DateTime(2004, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + stepDuration: SliderStepDuration(years: 2), + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/labels-and-divider.md b/Flutter/slider/labels-and-divider.md index 82d76d08f..039b6fe54 100644 --- a/Flutter/slider/labels-and-divider.md +++ b/Flutter/slider/labels-and-divider.md @@ -8,7 +8,9 @@ documentation: ug --- # Flutter Slider Labels and Dividers (SfSlider) -This section explains about how to add the labels and dividers in the slider. +This section explains how to add labels and dividers to the slider. + +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html) for customizing label and divider appearance in the examples below. You must also import the [`intl`](https://pub.dev/packages/intl) package for formatting numeric and date labels. ## Show labels @@ -19,29 +21,39 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/late {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showLabels: true, - showTicks: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ShowLabelsPage extends StatefulWidget { + @override + _ShowLabelsPageState createState() => _ShowLabelsPageState(); +} + +class _ShowLabelsPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showLabels: true, + showTicks: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -54,29 +66,39 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showLabels: true, - showTicks: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalShowLabelsPage extends StatefulWidget { + @override + _VerticalShowLabelsPageState createState() => _VerticalShowLabelsPageState(); +} + +class _VerticalShowLabelsPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showLabels: true, + showTicks: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -92,37 +114,46 @@ N> The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) property is used to format the numeric labels. The default value of [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) property is `null`. -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting numeric slider using the [`NumberFormat`](https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html) class. - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class NumberFormatPage extends StatefulWidget { + @override + _NumberFormatPageState createState() => _NumberFormatPageState(); +} + +class _NumberFormatPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat('\$'), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -135,30 +166,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalNumberFormatPage extends StatefulWidget { + @override + _VerticalNumberFormatPageState createState() => _VerticalNumberFormatPageState(); +} + +class _VerticalNumberFormatPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat('\$'), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -168,9 +210,7 @@ Widget build(BuildContext context) { ## Date format -The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) property is used to format the date labels. It is mandatory for date [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). For date values, the slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) property is `null`. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. +The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) property is used to format the date labels. It is mandatory for the date [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). For date values, the slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) property is `null`. ### Year format #### Horizontal @@ -178,31 +218,42 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class YearFormatPage extends StatefulWidget { + @override + _YearFormatPageState createState() => _YearFormatPageState(); +} + +class _YearFormatPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -215,31 +266,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalYearFormatPage extends StatefulWidget { + @override + _VerticalYearFormatPageState createState() => _VerticalYearFormatPageState(); +} + +class _VerticalYearFormatPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -253,31 +315,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2000, 03, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2000, 09, 01, 24), - value: _value, - interval: 2, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class MonthFormatPage extends StatefulWidget { + @override + _MonthFormatPageState createState() => _MonthFormatPageState(); +} + +class _MonthFormatPageState extends State { + DateTime _value = DateTime(2000, 03, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2000, 09, 02, 00), + value: _value, + interval: 2, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.yM(), + dateIntervalType: DateIntervalType.months, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -290,31 +363,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2000, 03, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2000, 09, 01, 24), - value: _value, - interval: 2, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalMonthFormatPage extends StatefulWidget { + @override + _VerticalMonthFormatPageState createState() => _VerticalMonthFormatPageState(); +} + +class _VerticalMonthFormatPageState extends State { + DateTime _value = DateTime(2000, 03, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2000, 09, 02, 00), + value: _value, + interval: 2, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.yM(), + dateIntervalType: DateIntervalType.months, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -329,31 +413,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2000, 01, 01, 12, 00, 00); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 02, 00, 00), - max: DateTime(2000, 01, 01, 22, 00, 00), - value: _value, - interval: 5, - showLabels: true, - showTicks: true, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HourFormatPage extends StatefulWidget { + @override + _HourFormatPageState createState() => _HourFormatPageState(); +} + +class _HourFormatPageState extends State { + DateTime _value = DateTime(2000, 01, 01, 12, 00, 00); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 02, 00, 00), + max: DateTime(2000, 01, 01, 22, 00, 00), + value: _value, + interval: 5, + showLabels: true, + showTicks: true, + dateFormat: DateFormat('h:mm a'), + dateIntervalType: DateIntervalType.hours, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -366,31 +461,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2000, 01, 01, 12, 00, 00); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 02, 00, 00), - max: DateTime(2000, 01, 01, 22, 00, 00), - value: _value, - interval: 5, - showLabels: true, - showTicks: true, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalHourFormatPage extends StatefulWidget { + @override + _VerticalHourFormatPageState createState() => _VerticalHourFormatPageState(); +} + +class _VerticalHourFormatPageState extends State { + DateTime _value = DateTime(2000, 01, 01, 12, 00, 00); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 02, 00, 00), + max: DateTime(2000, 01, 01, 22, 00, 00), + value: _value, + interval: 5, + showLabels: true, + showTicks: true, + dateFormat: DateFormat('h:mm a'), + dateIntervalType: DateIntervalType.hours, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -409,32 +515,43 @@ The [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/ {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - labelPlacement: LabelPlacement.betweenTicks, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class LabelPlacementPage extends StatefulWidget { + @override + _LabelPlacementPageState createState() => _LabelPlacementPageState(); +} + +class _LabelPlacementPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + labelPlacement: LabelPlacement.betweenTicks, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -447,32 +564,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - labelPlacement: LabelPlacement.betweenTicks, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalLabelPlacementPage extends StatefulWidget { + @override + _VerticalLabelPlacementPageState createState() => _VerticalLabelPlacementPageState(); +} + +class _VerticalLabelPlacementPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + labelPlacement: LabelPlacement.betweenTicks, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -491,76 +619,98 @@ The default value of the [`edgeLabelPlacement`](https://pub.dev/documentation/sy {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - edgeLabelPlacement: EdgeLabelPlacement.inside, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class EdgeLabelPlacementPage extends StatefulWidget { + @override + _EdgeLabelPlacementPageState createState() => _EdgeLabelPlacementPageState(); +} + +class _EdgeLabelPlacementPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} {% endtabs %} -![Edge Label placement support](images\label-and-divider\edge-label-placement.png) +![Edge Label placement support](images/label-and-divider/edge-label-placement.png) ### Vertical {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - edgeLabelPlacement: EdgeLabelPlacement.inside, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalEdgeLabelPlacementPage extends StatefulWidget { + @override + _VerticalEdgeLabelPlacementPageState createState() => _VerticalEdgeLabelPlacementPageState(); +} + +class _VerticalEdgeLabelPlacementPageState extends State { + DateTime _value = DateTime(2002, 01, 01); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} {% endtabs %} -![Edge Label placement support](images\label-and-divider\vertical-edge-label-placement.png) +![Edge Label placement support](images/label-and-divider/vertical-edge-label-placement.png) ## Customize label text @@ -577,31 +727,41 @@ You can format or change the whole numeric or date label text using the [`labelF {% tabs %} {% highlight Dart %} -double _value = 9900.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 100.0, - max: 10000.0, - value: _value, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class LabelFormatterPage extends StatefulWidget { + @override + _LabelFormatterPageState createState() => _LabelFormatterPageState(); +} + +class _LabelFormatterPageState extends State { + double _value = 9900.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 100.0, + max: 10000.0, + value: _value, + showLabels: true, + interval: 9900, + labelFormatterCallback: (dynamic actualValue, String formattedText) { + return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -614,31 +774,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 9900.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 100.0, - max: 10000.0, - value: _value, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalLabelFormatterPage extends StatefulWidget { + @override + _VerticalLabelFormatterPageState createState() => _VerticalLabelFormatterPageState(); +} + +class _VerticalLabelFormatterPageState extends State { + double _value = 9900.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 100.0, + max: 10000.0, + value: _value, + showLabels: true, + interval: 9900, + labelFormatterCallback: (dynamic actualValue, String formattedText) { + return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; + }, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -654,42 +824,51 @@ The active side of the slider is between the [`min`](https://pub.dev/documentati The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class LabelStylePage extends StatefulWidget { + @override + _LabelStylePageState createState() => _LabelStylePageState(); +} + +class _LabelStylePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), + inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -702,35 +881,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - interval: 1, - showLabels: true, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalLabelStylePage extends StatefulWidget { + @override + _VerticalLabelStylePageState createState() => _VerticalLabelStylePageState(); +} + +class _VerticalLabelStylePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), + inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + interval: 1, + showLabels: true, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -747,6 +937,15 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class IndividualLabelPage extends StatefulWidget { + @override + _IndividualLabelPageState createState() => _IndividualLabelPageState(); +} + +class _IndividualLabelPageState extends State { double _value = 6.0; @override @@ -760,7 +959,7 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d interval: 1, showLabels: true, showTicks: true, - onChanged: (dynamic value) { + onChanged: (double value) { setState(() { _value = value; }); @@ -788,6 +987,7 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d ), ); } +} {% endhighlight %} {% endtabs %} @@ -799,6 +999,15 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalIndividualLabelsPage extends StatefulWidget { + @override + _VerticalIndividualLabelsPageState createState() => _VerticalIndividualLabelsPageState(); +} + +class _VerticalIndividualLabelsPageState extends State { double _value = 6.0; @override @@ -812,7 +1021,7 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d interval: 1, showLabels: true, showTicks: true, - onChanged: (dynamic value) { + onChanged: (double value) { setState(() { _value = value; }); @@ -840,6 +1049,7 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d ), ); } +} {% endhighlight %} {% endtabs %} @@ -850,8 +1060,6 @@ You can customize the appearance of each label on the [`SfSlider`](https://pub.d You can adjust the space between ticks and labels of the slider using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal 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/SfSlider/showTicks.html) property is `false`. @@ -860,34 +1068,45 @@ The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_fl {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - labelOffset: Offset(0.0, 10.0), - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - interval: 2, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class LabelOffsetPage extends StatefulWidget { + @override + _LabelOffsetPageState createState() => _LabelOffsetPageState(); +} + +class _LabelOffsetPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + labelOffset: Offset(0.0, 10.0), + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + interval: 2, + showTicks: true, + showLabels: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -903,34 +1122,45 @@ The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_fl {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - labelOffset: Offset(10.0, 0.0), - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - interval: 2, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalLabelOffsetPage extends StatefulWidget { + @override + _VerticalLabelOffsetPageState createState() => _VerticalLabelOffsetPageState(); +} + +class _VerticalLabelOffsetPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + labelOffset: Offset(10.0, 0.0), + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + interval: 2, + showTicks: true, + showLabels: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -949,34 +1179,45 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - ), - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showDividers: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ShowDividersPage extends StatefulWidget { + @override + _ShowDividersPageState createState() => _ShowDividersPageState(); +} + +class _ShowDividersPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + ), + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showDividers: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ) - ) - ); + ) + ) + ); + } } {% endhighlight %} @@ -989,34 +1230,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - ), - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showDividers: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalShowDividersPage extends StatefulWidget { + @override + _VerticalShowDividersPageState createState() => _VerticalShowDividersPageState(); +} + +class _VerticalShowDividersPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + ), + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showDividers: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ) - ) - ); + ) + ) + ); + } } {% endhighlight %} @@ -1028,43 +1280,52 @@ Widget build(BuildContext context) { You can change the active and inactive divider radius of the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class DividerRadiusPage extends StatefulWidget { + @override + _DividerRadiusPageState createState() => _DividerRadiusPageState(); +} + +class _DividerRadiusPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 5, + inactiveDividerRadius: 5, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} @@ -1077,36 +1338,47 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class VerticalDividerRadiusPage extends StatefulWidget { + @override + _VerticalDividerRadiusPageState createState() => _VerticalDividerRadiusPageState(); +} + +class _VerticalDividerRadiusPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 5, + inactiveDividerRadius: 5, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} @@ -1121,45 +1393,54 @@ You can change the active and inactive divider stroke width of the slider using Also, you can change the active and inactive divider stroke color of the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class DividerStrokePage extends StatefulWidget { + @override + _DividerStrokePageState createState() => _DividerStrokePageState(); +} + +class _DividerStrokePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerStrokeColor: Colors.red, + activeDividerStrokeWidth: 2, + inactiveDividerStrokeWidth: 2, + inactiveDividerStrokeColor: Colors.red, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} @@ -1172,38 +1453,49 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class VerticalDividerStrokePage extends StatefulWidget { + @override + _VerticalDividerStrokePageState createState() => _VerticalDividerStrokePageState(); +} + +class _VerticalDividerStrokePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerStrokeColor: Colors.red, + activeDividerStrokeWidth: 2, + inactiveDividerStrokeWidth: 2, + inactiveDividerStrokeColor: Colors.red, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} @@ -1216,43 +1508,52 @@ Widget build(BuildContext context) { You can change the active and inactive divider color of the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class DividerColorPage extends StatefulWidget { + @override + _DividerColorPageState createState() => _DividerColorPageState(); +} + +class _DividerColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + activeDividerColor: Colors.red, + inactiveDividerColor: Colors.red[200], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} @@ -1265,36 +1566,47 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showDividers: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ) - ); +class VerticalDividerColorPage extends StatefulWidget { + @override + _VerticalDividerColorPageState createState() => _VerticalDividerColorPageState(); +} + +class _VerticalDividerColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + activeDividerColor: Colors.red, + inactiveDividerColor: Colors.red[200], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showDividers: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/overview.md b/Flutter/slider/overview.md index 897f6e589..871d0c587 100644 --- a/Flutter/slider/overview.md +++ b/Flutter/slider/overview.md @@ -2,7 +2,7 @@ layout: post title: About Flutter Slider widget | Syncfusion description: Learn here all about the introduction of Syncfusion Flutter Slider (SfSlider) widget, its features, and more. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- @@ -15,16 +15,16 @@ Syncfusion® Flutter Slider is a highly interactive UI widget, all ## Features -* **Numeric and date support** - Provides functionality for selecting numeric and date values. For dates, support is provided up to the seconds interval. +* **Numeric and date support** - Provides functionality for selecting numeric and date values. For dates, support is provided up to the seconds interval. For more details, refer to the Set numeric value and Set date value documentation. -* **Labels** - Render labels for date and numeric values with the option to customize their formats based on your requirements. +* **Labels** - Render labels for date and numeric values with the option to customize their formats based on your requirements. For more details, refer to the [Labels and dividers](https://help.syncfusion.com/flutter/slider/labels-and-divider) documentation. -* **Ticks and dividers** - Provides the option to show ticks and dividers based on the slider interval. Also, minor ticks can be enabled to indicate the values between each interval. These options present the selected value in a more intuitive way for end users. +* **Ticks and dividers** - Provides the option to show ticks and dividers based on the slider interval. Also, minor ticks can be enabled to indicate the values between each interval. These options present the selected value in a more intuitive way for end users. For more details, refer to the [Ticks and dividers](https://help.syncfusion.com/flutter/slider/ticks) documentation. -* **Thumb icon support** - Accepts custom widgets like icon or text inside the thumb. +* **Thumb icon support** - Accepts custom widgets like icons or text inside the thumb. For more details, refer to the [Thumb icon](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-icon) documentation. -* **Tooltip** - Render a tooltip to show the selected value clearly. You can also customize the format of the text shown in the tooltip. +* **Tooltip** - Render a tooltip to show the selected value clearly. You can also customize the format of the text shown in the tooltip. For more details, refer to the [Tooltip](https://help.syncfusion.com/flutter/slider/tooltip) documentation. -* **Highly customizable** - In addition to the rich set of built-in features, the control is fully customizable through its wide range options. +* **Highly customizable** - In addition to the rich set of built-in features, the control is fully customizable through its wide range of options. For more details, refer to the [Customization](https://help.syncfusion.com/flutter/slider/enabled-and-disabled-state) documentation. -* **Orientation** - Supports both horizontal and vertical orientations. +* **Orientation** - Supports both horizontal and vertical orientations. For more details, refer to the [Orientation](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/SfSlider.vertical.html) documentation. diff --git a/Flutter/slider/right-to-left.md b/Flutter/slider/right-to-left.md index ab7516a24..6f3863a9c 100644 --- a/Flutter/slider/right-to-left.md +++ b/Flutter/slider/right-to-left.md @@ -2,7 +2,7 @@ layout: post title: RTL in Flutter Slider widget | Syncfusion description: This section explains about the right to left (RTL) rendering in Syncfusion Flutter Slider (SfSlider) widget. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## 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 SfSlider with Directionality widget @@ -20,30 +20,42 @@ The slider can be wrapped inside the [`Directionality`](https://api.flutter.dev/ {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: Center( - child: SfSlider( - min: 0.0, - max: 100.0, - value: _value, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ), - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class RTLDirectionalityPage extends StatefulWidget { + @override + _RTLDirectionalityPageState createState() => _RTLDirectionalityPageState(); +} + +class _RTLDirectionalityPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: Center( + child: SfSlider( + min: 0.0, + max: 100.0, + value: _value, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ), + ) + ); + } } {% endhighlight %} @@ -53,8 +65,14 @@ Widget build(BuildContext context) { The slider will render in right to left direction if the locale belongs to RTL languages such as (Arabic, Persian, Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file. +N> The Persian (Farsi) locale `Locale("fa", "IR")` is used in the example below. Replace it with your desired RTL locale (e.g., `Locale("ar")` for Arabic, `Locale("he")` for Hebrew, `Locale("ps")` for Pashto, or `Locale("ur")` for Urdu). + +**Add the flutter_localizations dependency** + +Add the `flutter_localizations` package to your pubspec.yaml file. + {% tabs %} -{% highlight Dart %} +{% highlight yaml %} dependencies: flutter_localizations: @@ -63,39 +81,52 @@ dependencies: {% endhighlight %} {% endtabs %} +N> Add the `flutter_localizations` package to your pubspec.yaml and run `flutter pub get` to fetch it. + {% tabs %} {% highlight Dart %} -double _value = 40.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: SfSlider( - min: 0.0, - max: 100.0, - value: _value, - interval: 20, - showLabels: true, - showTicks: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class RTLLocalePage extends StatefulWidget { + @override + _RTLLocalePageState createState() => _RTLLocalePageState(); +} + +class _RTLLocalePageState extends State { + double _value = 40.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: SfSlider( + min: 0.0, + max: 100.0, + value: _value, + interval: 20, + showLabels: true, + showTicks: true, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/slider/shapes.md b/Flutter/slider/shapes.md index 81d5a61de..8bc28bad7 100644 --- a/Flutter/slider/shapes.md +++ b/Flutter/slider/shapes.md @@ -11,6 +11,8 @@ documentation: ug This section explains how to customize slider shape elements—track, thumb, divider, and ticks. +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html) in all the examples shown below. Define each custom shape class outside your widget class so the slider can reference it. + ## Track shape You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/trackShape.html) property in the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). @@ -25,31 +27,42 @@ N> {% tabs %} {% highlight Dart %} -double _value = 5.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - ), - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - trackShape: _SfTrackShape(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +class TrackShapePage extends StatefulWidget { + @override + _TrackShapePageState createState() => _TrackShapePageState(); +} + +class _TrackShapePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + ), + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + trackShape: _SfTrackShape(), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), ), - ), - ); + ); + } } class _SfTrackShape extends SfTrackShape { @@ -94,31 +107,44 @@ 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. +I> The `themeData.activeTrackColor` may be `null`. The null assertion operator (`!`) is used here for brevity; in production code, prefer a fallback (e.g., `themeData.activeTrackColor ?? Colors.red`) to avoid null errors. + {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData(overlayRadius: 0), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - thumbShape: _SfThumbShape(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ThumbShapePage extends StatefulWidget { + @override + _ThumbShapePageState createState() => _ThumbShapePageState(); +} + +class _ThumbShapePageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData(overlayRadius: 0), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + thumbShape: _SfThumbShape(), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), ), - ), - ); + ); + } } class _SfThumbShape extends SfThumbShape { @@ -167,25 +193,35 @@ N> {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - interval: 1, - showDividers: true, - dividerShape: _DividerShape(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class DividerShapePage extends StatefulWidget { + @override + _DividerShapePageState createState() => _DividerShapePageState(); +} + +class _DividerShapePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + interval: 1, + showDividers: true, + dividerShape: _DividerShape(), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ); + } } class _DividerShape extends SfDividerShape { @@ -199,7 +235,7 @@ class _DividerShape extends SfDividerShape { required Paint? paint, required Animation enableAnimation, required TextDirection textDirection}) { - bool isActive; + bool isActive = false; switch (textDirection) { case TextDirection.ltr: @@ -238,27 +274,39 @@ N> {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 1, - showTicks: true, - minorTicksPerInterval: 3, - tickShape: _SfTickShape(), - minorTickShape: _SfMinorTickShape(), - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ); +import 'dart:math' as math; + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TicksShapePage extends StatefulWidget { + @override + _TicksShapePageState createState() => _TicksShapePageState(); +} + +class _TicksShapePageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 1, + showTicks: true, + minorTicksPerInterval: 3, + tickShape: _SfTickShape(), + minorTickShape: _SfMinorTickShape(), + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ); + } } class _SfTickShape extends SfTickShape { diff --git a/Flutter/slider/thumb-and-overlay.md b/Flutter/slider/thumb-and-overlay.md index f7a33c8a1..54801a158 100644 --- a/Flutter/slider/thumb-and-overlay.md +++ b/Flutter/slider/thumb-and-overlay.md @@ -9,50 +9,61 @@ documentation: ug # Flutter Slider Thumb and Thumb Overlay (SfSlider) -This section helps to learn about how to customize the thumb and thumb overlay in the slider. +This section explains how to customize the thumb and thumb overlay in the slider. * Thumb - It is one of the elements of slider which can be used to drag and change the selected value of the slider. -* Thumb overlay - It is rendered around the thumb while interacting with them. +* Thumb overlay - It is rendered around the thumb while interacting with it. + +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html) in all the examples shown below. ## Thumb size You can change the size of the thumb in the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbRadius: 13, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class ThumbSizePage extends StatefulWidget { + @override + _ThumbSizePageState createState() => _ThumbSizePageState(); +} + +class _ThumbSizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbRadius: 13, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -65,34 +76,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbRadius: 13, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalThumbSizePage extends StatefulWidget { + @override + _VerticalThumbSizePageState createState() => _VerticalThumbSizePageState(); +} + +class _VerticalThumbSizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbRadius: 13, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -104,41 +126,50 @@ Widget build(BuildContext context) { You can change the color of the thumb in the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbColor: Colors.red, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class ThumbColorPage extends StatefulWidget { + @override + _ThumbColorPageState createState() => _ThumbColorPageState(); +} + +class _ThumbColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbColor: Colors.red, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -151,34 +182,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbColor: Colors.red, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalThumbColorPage extends StatefulWidget { + @override + _VerticalThumbColorPageState createState() => _VerticalThumbColorPageState(); +} + +class _VerticalThumbColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbColor: Colors.red, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -190,42 +232,51 @@ Widget build(BuildContext context) { 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ThumbStrokePage extends StatefulWidget { + @override + _ThumbStrokePageState createState() => _ThumbStrokePageState(); +} + +class _ThumbStrokePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbStrokeWidth: 3, + thumbStrokeColor: Colors.red + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -238,35 +289,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalThumbStrokePage extends StatefulWidget { + @override + _VerticalThumbStrokePageState createState() => _VerticalThumbStrokePageState(); +} + +class _VerticalThumbStrokePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + thumbStrokeWidth: 3, + thumbStrokeColor: Colors.red + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -277,47 +339,58 @@ Widget build(BuildContext context) { ## Thumb icon -You can show the custom widgets like icon or text inside the thumb using the [`thumbIcon`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/thumbIcon.html) property. +You can show the custom widgets like icon or text inside the thumb using the [`thumbIcon`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/thumbIcon.html) property. The `thumbIcon` widget is rendered inside the thumb. ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfSliderTheme( - data: SfSliderThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: Center( - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - thumbIcon: Icon( - Icons.arrow_forward_ios, - color: Colors.blue, - size: 20.0), - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class ThumbIconPage extends StatefulWidget { + @override + _ThumbIconPageState createState() => _ThumbIconPageState(); +} + +class _ThumbIconPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfSliderTheme( + data: SfSliderThemeData( + thumbColor: Colors.white, + thumbRadius: 15, + thumbStrokeWidth: 2, + thumbStrokeColor: Colors.blue + ), + child: Center( + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + thumbIcon: const Icon( + Icons.arrow_forward_ios, + color: Colors.blue, + size: 20.0), + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ) - ) - ); + ) + ) + ); + } } {% endhighlight %} @@ -330,40 +403,51 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: SfSliderTheme( - data: SfSliderThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: Center( - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - thumbIcon: Icon( - Icons.keyboard_arrow_up_outlined, - color: Colors.blue, - size: 20.0), - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalThumbIconPage extends StatefulWidget { + @override + _VerticalThumbIconPageState createState() => _VerticalThumbIconPageState(); +} + +class _VerticalThumbIconPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: SfSliderTheme( + data: SfSliderThemeData( + thumbColor: Colors.white, + thumbRadius: 15, + thumbStrokeWidth: 2, + thumbStrokeColor: Colors.blue + ), + child: Center( + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + thumbIcon: const Icon( + Icons.keyboard_arrow_up_outlined, + color: Colors.blue, + size: 20.0), + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), ), - ), - ) - ) - ); + ) + ) + ); + } } {% endhighlight %} @@ -376,41 +460,50 @@ Widget build(BuildContext context) { You can change the size of the thumb overlay in the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - overlayRadius: 30, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class OverlaySizePage extends StatefulWidget { + @override + _OverlaySizePageState createState() => _OverlaySizePageState(); +} + +class _OverlaySizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + overlayRadius: 30, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -423,34 +516,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - overlayRadius: 30, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalOverlaySizePage extends StatefulWidget { + @override + _VerticalOverlaySizePageState createState() => _VerticalOverlaySizePageState(); +} + +class _VerticalOverlaySizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + overlayRadius: 30, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -463,41 +567,50 @@ Widget build(BuildContext context) { You can change the color of the thumb overlay in the slider 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - overlayColor: Colors.red[50], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class OverlayColorPage extends StatefulWidget { + @override + _OverlayColorPageState createState() => _OverlayColorPageState(); +} + +class _OverlayColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + overlayColor: Colors.red[50], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -510,34 +623,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - overlayColor: Colors.red[50], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class VerticalOverlayColorPage extends StatefulWidget { + @override + _VerticalOverlayColorPageState createState() => _VerticalOverlayColorPageState(); +} + +class _VerticalOverlayColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + overlayColor: Colors.red[50], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/ticks.md b/Flutter/slider/ticks.md index 57e429d43..49723ea33 100644 --- a/Flutter/slider/ticks.md +++ b/Flutter/slider/ticks.md @@ -2,18 +2,20 @@ layout: post title: Tick in Flutter Slider widget | Syncfusion description: Learn here all about adding the Tick feature of Syncfusion Flutter Slider (SfSlider) widget and more. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- # Tick in Flutter Slider (SfSlider) -This section helps to learn about how to add major and minor ticks in the slider. +This section explains how to add major and minor ticks in the slider. + +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html) for customizing tick colors, sizes, and offsets shown in the examples below. ## 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/SfSlider/showTicks.html) property is `false`. +You can enable the major ticks on the track. It is a shape which is used to represent the points at each major interval on the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/showTicks.html) property is `false`. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html) is 2.0, the slider will render the major ticks at 0.0, 2.0, 4.0 and so on. @@ -22,29 +24,39 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class MajorTicksPage extends StatefulWidget { + @override + _MajorTicksPageState createState() => _MajorTicksPageState(); +} + +class _MajorTicksPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -57,29 +69,39 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalMajorTicksPage extends StatefulWidget { + @override + _VerticalMajorTicksPageState createState() => _VerticalMajorTicksPageState(); +} + +class _VerticalMajorTicksPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -93,37 +115,47 @@ N> Refer the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_slid It is used to represent the number of smaller ticks between two major ticks. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html) is 2.0, the slider will render the major ticks at 0.0, 2.0, 4.0 and so on. If [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/minorTicksPerInterval.html) is 1, then smaller ticks will be rendered on 1.0 and 3.0 and so on. -I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/minorTicksPerInterval.html) property is null and it must be greater than 0. +I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/minorTicksPerInterval.html) property is null and it must be greater than 0. When null, no minor ticks are rendered. ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class MinorTicksPage extends StatefulWidget { + @override + _MinorTicksPageState createState() => _MinorTicksPageState(); +} + +class _MinorTicksPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -136,30 +168,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalMinorTicksPage extends StatefulWidget { + @override + _VerticalMinorTicksPageState createState() => _VerticalMinorTicksPageState(); +} + +class _VerticalMinorTicksPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -179,41 +221,50 @@ The active side of the slider is between the [`min`](https://pub.dev/documentati The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - interval: 1, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class MajorTicksColorPage extends StatefulWidget { + @override + _MajorTicksColorPageState createState() => _MajorTicksColorPageState(); +} + +class _MajorTicksColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTickColor: Colors.red, + inactiveTickColor: Colors.red[100], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + interval: 1, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -226,34 +277,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - interval: 1, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalMajorTicksColorPage extends StatefulWidget { + @override + _VerticalMajorTicksColorPageState createState() => _VerticalMajorTicksColorPageState(); +} + +class _VerticalMajorTicksColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTickColor: Colors.red, + inactiveTickColor: Colors.red[100], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + interval: 1, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -269,42 +331,51 @@ The active side of the slider is between the [`min`](https://pub.dev/documentati The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class MinorTicksColorPage extends StatefulWidget { + @override + _MinorTicksColorPageState createState() => _MinorTicksColorPageState(); +} + +class _MinorTicksColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeMinorTickColor: Colors.red, + inactiveMinorTickColor: Colors.red[200], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -317,35 +388,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalMinorTicksColorPage extends StatefulWidget { + @override + _VerticalMinorTicksColorPageState createState() => _VerticalMinorTicksColorPageState(); +} + +class _VerticalMinorTicksColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeMinorTickColor: Colors.red, + inactiveMinorTickColor: Colors.red[200], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -353,46 +435,57 @@ Widget build(BuildContext context) { ![Minor ticks color](images/tick/vertical-slider-minor-ticks.png) -## Ticks size +## Tick size -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). +You can change the major and minor ticks size of the slider 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. ### Horizontal -You can change the major and minor ticks size of the slider 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)`. +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 %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tickSize: Size(3.0, 12.0), - minorTickSize: Size(3.0, 8.0), - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TickSizePage extends StatefulWidget { + @override + _TickSizePageState createState() => _TickSizePageState(); +} + +class _TickSizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tickSize: Size(3.0, 12.0), + minorTickSize: Size(3.0, 8.0), + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -402,40 +495,51 @@ Widget build(BuildContext context) { ### Vertical -You can change the major and minor ticks size of the slider 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(8.0, 1.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(5.0, 1.0)`. +The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(8.0, 1.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(5.0, 1.0)`. {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tickSize: Size(12.0, 3.0), - minorTickSize: Size(8.0, 3.0), - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTickSizePage extends StatefulWidget { + @override + _VerticalTickSizePageState createState() => _VerticalTickSizePageState(); +} + +class _VerticalTickSizePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tickSize: Size(12.0, 3.0), + minorTickSize: Size(8.0, 3.0), + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -447,41 +551,50 @@ Widget build(BuildContext context) { You can adjust the space between track and ticks of the slider using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property in the [`SfSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tickOffset: Offset(0.0, 10.0), - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TicksOffsetPage extends StatefulWidget { + @override + _TicksOffsetPageState createState() => _TicksOffsetPageState(); +} + +class _TicksOffsetPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tickOffset: Offset(0.0, 10.0), + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -494,34 +607,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tickOffset: Offset(0.0, 10.0), - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTicksOffsetPage extends StatefulWidget { + @override + _VerticalTicksOffsetPageState createState() => _VerticalTicksOffsetPageState(); +} + +class _VerticalTicksOffsetPageState extends State { + double _value = 4.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tickOffset: Offset(0.0, 10.0), + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/tooltip.md b/Flutter/slider/tooltip.md index f88fb245f..d8f2a825f 100644 --- a/Flutter/slider/tooltip.md +++ b/Flutter/slider/tooltip.md @@ -9,11 +9,11 @@ documentation: ug # Flutter Slider Tooltip (SfSlider) -This section helps to learn about how to add tooltip in the slider. +This section explains how to add a tooltip in the slider. ## Enable tooltip -You can enable tooltip for the thumb using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html). It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html). +You can enable a tooltip for the thumb using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html) property. It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html). I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the slider thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html) behavior. @@ -22,30 +22,40 @@ I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documenta {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class EnableTooltipPage extends StatefulWidget { + @override + _EnableTooltipPageState createState() => _EnableTooltipPageState(); +} + +class _EnableTooltipPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -58,30 +68,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalEnableTooltipPage extends StatefulWidget { + @override + _VerticalEnableTooltipPageState createState() => _VerticalEnableTooltipPageState(); +} + +class _VerticalEnableTooltipPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -103,31 +123,41 @@ N> The paddle tooltip shape is not applicable for vertical orientation of the sl {% tabs %} {% highlight Dart %} -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 100.0, - interval: 20, - showTicks: true, - showLabels: true, - enableTooltip: true, - tooltipShape: SfPaddleTooltipShape(), - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipShapePage extends StatefulWidget { + @override + _TooltipShapePageState createState() => _TooltipShapePageState(); +} + +class _TooltipShapePageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 100.0, + interval: 20, + showTicks: true, + showLabels: true, + enableTooltip: true, + tooltipShape: SfPaddleTooltipShape(), + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -135,7 +165,7 @@ Widget build(BuildContext context) { ![Slider tooltip shape](images/tooltip/tooltip-shape.png) -## Tooltip Position +## Tooltip position N> This is only applicable for vertical orientation of the sliders. @@ -144,31 +174,41 @@ You can show tooltip in left or right positions using the [`tooltipPosition`](ht {% tabs %} {% highlight Dart %} -double _value = 40.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 100.0, - interval: 20, - showTicks: true, - showLabels: true, - tooltipPosition: SliderTooltipPosition.right, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipPositionPage extends StatefulWidget { + @override + _TooltipPositionPageState createState() => _TooltipPositionPageState(); +} + +class _TooltipPositionPageState extends State { + double _value = 40.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 100.0, + interval: 20, + showTicks: true, + showLabels: true, + tooltipPosition: SliderTooltipPosition.right, + enableTooltip: true, + value: _value, + onChanged: (double newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -180,7 +220,7 @@ Widget build(BuildContext context) { By default it is formatted based on [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) property and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) property based on whether it is date type [`SfSlider`](https://help.syncfusion.com/flutter/slider/getting-started#set-date-value) or numeric [`SfSlider`](https://help.syncfusion.com/flutter/slider/getting-started#set-numeric-value). -You can format or change the whole tooltip label text using the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipTextFormatterCallback.html). Its arguments are, +You can format or change the whole tooltip label text using the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipTextFormatterCallback.html). Its arguments are, * actualValue – either `DateTime` or `double` based on given [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html). * formattedText – If the actual value is `double`, it is formatted by [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html). @@ -190,35 +230,46 @@ You can format or change the whole tooltip label text using the [`tooltipTextFor {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2010, 01, 01, 15, 00, 00); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2010, 01, 01, 9, 00, 00), - max: DateTime(2010, 01, 01, 21, 05, 00), - value: _value, - interval: 3, - showTicks: true, - showLabels: true, - enableTooltip: true, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipTextFormatPage extends StatefulWidget { + @override + _TooltipTextFormatPageState createState() => _TooltipTextFormatPageState(); +} + +class _TooltipTextFormatPageState extends State { + DateTime _value = DateTime(2010, 01, 01, 15, 00, 00); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2010, 01, 01, 9, 00, 00), + max: DateTime(2010, 01, 01, 21, 05, 00), + value: _value, + interval: 3, + showTicks: true, + showLabels: true, + enableTooltip: true, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { + return DateFormat('h:mm a').format(actualValue); + }, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -231,35 +282,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _value = DateTime(2010, 01, 01, 15, 00, 00); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2010, 01, 01, 9, 00, 00), - max: DateTime(2010, 01, 01, 21, 05, 00), - value: _value, - interval: 3, - showTicks: true, - showLabels: true, - enableTooltip: true, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTooltipTextFormatPage extends StatefulWidget { + @override + _VerticalTooltipTextFormatPageState createState() => _VerticalTooltipTextFormatPageState(); +} + +class _VerticalTooltipTextFormatPageState extends State { + DateTime _value = DateTime(2010, 01, 01, 15, 00, 00); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2010, 01, 01, 9, 00, 00), + max: DateTime(2010, 01, 01, 21, 05, 00), + value: _value, + interval: 3, + showTicks: true, + showLabels: true, + enableTooltip: true, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { + return DateFormat('h:mm a').format(actualValue); + }, + onChanged: (DateTime newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); + } } {% endhighlight %} @@ -272,44 +334,51 @@ Widget build(BuildContext context) { You can change the background color of the tooltip in the slider using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipColorPage extends StatefulWidget { + @override + _TooltipColorPageState createState() => _TooltipColorPageState(); +} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class _TooltipColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tooltipBackgroundColor: Colors.red[300], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -322,37 +391,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTooltipColorPage extends StatefulWidget { + @override + _VerticalTooltipColorPageState createState() => _VerticalTooltipColorPageState(); +} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +class _VerticalTooltipColorPageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tooltipBackgroundColor: Colors.red[300], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -364,42 +442,51 @@ Widget build(BuildContext context) { You can change the appearance of the tooltip text in the slider using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TooltipLabelStylePage extends StatefulWidget { + @override + _TooltipLabelStylePageState createState() => _TooltipLabelStylePageState(); +} + +class _TooltipLabelStylePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), + ), + child: SfSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -412,35 +499,46 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 6.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTooltipLabelStylePage extends StatefulWidget { + @override + _VerticalTooltipLabelStylePageState createState() => _VerticalTooltipLabelStylePageState(); +} + +class _VerticalTooltipLabelStylePageState extends State { + double _value = 6.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} diff --git a/Flutter/slider/track.md b/Flutter/slider/track.md index f3d8ee016..a7736ef45 100644 --- a/Flutter/slider/track.md +++ b/Flutter/slider/track.md @@ -2,14 +2,16 @@ layout: post title: Track in Flutter Slider widget | Syncfusion description: Learn here all about adding the Track feature of Syncfusion Flutter Slider (SfSlider) widget and more. -platform: Flutter +platform: flutter control: SfSlider documentation: ug --- # Track in Flutter Slider (SfSlider) -This section helps to learn about how to customize the track in the slider. +This section explains how to customize the track in the slider. + +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html) in all the examples shown below. ## Track color @@ -19,39 +21,48 @@ The active side of the slider is between the [`min`](https://pub.dev/documentati The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TrackColorPage extends StatefulWidget { + @override + _TrackColorPageState createState() => _TrackColorPageState(); +} + +class _TrackColorPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackColor: Colors.red, + inactiveTrackColor: Colors.red[100], + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -64,32 +75,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTrackColorPage extends StatefulWidget { + @override + _VerticalTrackColorPageState createState() => _VerticalTrackColorPageState(); +} + +class _VerticalTrackColorPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackColor: Colors.red, + inactiveTrackColor: Colors.red[100], + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -101,39 +123,48 @@ Widget build(BuildContext context) { You can change the track height of the slider using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackHeight.html) and [`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`. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TrackHeightPage extends StatefulWidget { + @override + _TrackHeightPageState createState() => _TrackHeightPageState(); +} + +class _TrackHeightPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 8, + inactiveTrackHeight: 8, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -146,32 +177,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTrackHeightPage extends StatefulWidget { + @override + _VerticalTrackHeightPageState createState() => _VerticalTrackHeightPageState(); +} + +class _VerticalTrackHeightPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + activeTrackHeight: 8, + inactiveTrackHeight: 8, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -183,40 +225,50 @@ Widget build(BuildContext context) { You can change the corner of the track to be round in the slider 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`. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfSlider( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class TrackCornerRadiusPage extends StatefulWidget { + @override + _TrackCornerRadiusPageState createState() => _TrackCornerRadiusPageState(); +} + +class _TrackCornerRadiusPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + // Track height is increased so that the rounded corners are clearly visible. + activeTrackHeight: 10, + inactiveTrackHeight: 10, + trackCornerRadius: 5, + ), + child: SfSlider( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %} @@ -229,33 +281,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -double _value = 5.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSliderTheme( - data: SfSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfSlider.vertical( - min: 2.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue){ - setState(() { - _value = newValue; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class VerticalTrackCornerRadiusPage extends StatefulWidget { + @override + _VerticalTrackCornerRadiusPageState createState() => _VerticalTrackCornerRadiusPageState(); +} + +class _VerticalTrackCornerRadiusPageState extends State { + double _value = 5.0; + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSliderTheme( + data: SfSliderThemeData( + // Track height is increased so that the rounded corners are clearly visible. + activeTrackHeight: 10, + inactiveTrackHeight: 10, + trackCornerRadius: 5, + ), + child: SfSlider.vertical( + min: 2.0, + max: 10.0, + value: _value, + onChanged: (double newValue){ + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ) + ); + } } {% endhighlight %}