Enabled and Disabled States in Flutter Range Selector

18 Nov 201817 minutes to read

This section explains the enabled and disabled states in the Flutter Range Selector.

Enabled state

By default, the Flutter Range Selector is rendered in the enabled state. You can explicitly control it using the enabled property. The default value of the enabled property is true.

DART

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

class EnabledStateSample extends StatefulWidget {
  @override
  _EnabledStateSampleState createState() => _EnabledStateSampleState();
}

class _EnabledStateSampleState extends State<EnabledStateSample> {
  final double _min = 2.0;
  final double _max = 10.0;
  SfRangeValues _initialValues = SfRangeValues(5.0, 8.0);

  final List<Data> _chartData = <Data>[
    Data(x: 2.0, y: 2.2),
    Data(x: 3.0, y: 3.4),
    Data(x: 4.0, y: 2.8),
    Data(x: 5.0, y: 1.6),
    Data(x: 6.0, y: 2.3),
    Data(x: 7.0, y: 2.5),
    Data(x: 8.0, y: 2.9),
    Data(x: 9.0, y: 3.8),
    Data(x: 10.0, y: 3.7),
  ];

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

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

Disabled state

You can render the Flutter Range Selector in a disabled state using the enabled property. The default value of the enabled property is true.

DART

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

class DisabledStateSample extends StatefulWidget {
  @override
  _DisabledStateSampleState createState() => _DisabledStateSampleState();
}

class _DisabledStateSampleState extends State<DisabledStateSample> {
  final double _min = 2.0;
  final double _max = 10.0;
  SfRangeValues _initialValues = SfRangeValues(5.0, 8.0);

  final List<Data> _chartData = <Data>[
    Data(x: 2.0, y: 2.2),
    Data(x: 3.0, y: 3.4),
    Data(x: 4.0, y: 2.8),
    Data(x: 5.0, y: 1.6),
    Data(x: 6.0, y: 2.3),
    Data(x: 7.0, y: 2.5),
    Data(x: 8.0, y: 2.9),
    Data(x: 9.0, y: 3.8),
    Data(x: 10.0, y: 3.7),
  ];

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

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

Disabled color

You can change the following:

• The color of the active and inactive track in the disabled state using the disabledActiveTrackColor and disabledInactiveTrackColor properties.
• The color of the active and inactive major ticks in the disabled state using the disabledActiveTickColor and disabledInactiveTickColor properties.
• The color of the active and inactive minor ticks in the disabled state using the disabledActiveMinorTickColor and disabledInactiveMinorTickColor properties.
• The color of the active and inactive dividers in the disabled state using the disabledActiveDividerColor and disabledInactiveDividerColor properties.
• The color of the thumb in the disabled state using the disabledThumbColor property.

NOTE

You must import the theme.dart library from the Core package to use SfRangeSelectorTheme.

DART

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

class DisabledColorSample extends StatefulWidget {
  @override
  _DisabledColorSampleState createState() => _DisabledColorSampleState();
}

class _DisabledColorSampleState extends State<DisabledColorSample> {
  final double _min = 2.0;
  final double _max = 10.0;
  SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

  final List<Data> _chartData = <Data>[
    Data(x: 2.0, y: 2.2),
    Data(x: 3.0, y: 3.4),
    Data(x: 4.0, y: 2.8),
    Data(x: 5.0, y: 1.6),
    Data(x: 6.0, y: 2.3),
    Data(x: 7.0, y: 2.5),
    Data(x: 8.0, y: 2.9),
    Data(x: 9.0, y: 3.8),
    Data(x: 10.0, y: 3.7),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfRangeSelectorTheme(
            data: SfRangeSelectorThemeData(
              disabledActiveTrackColor: Colors.red[900],
              disabledInactiveTrackColor: Colors.red[200],
              disabledActiveTickColor: Colors.red[900],
              disabledInactiveTickColor: Colors.red[200],
              disabledActiveMinorTickColor: Colors.red[900],
              disabledInactiveMinorTickColor: Colors.red[200],
              disabledActiveDividerColor: Colors.blue[900],
              disabledInactiveDividerColor: Colors.blue[200],
              disabledThumbColor: Colors.red,
              activeTrackHeight: 4,
              inactiveTrackHeight: 4,
            ),
            child: SfRangeSelector(
              min: _min,
              max: _max,
              interval: 1,
              showLabels: true,
              enabled: false,
              showTicks: true,
              showDividers: true,
              initialValues: _initialValues,
              child: Container(
                height: 130,
                child: SfCartesianChart(
                  margin: const EdgeInsets.all(0),
                  primaryXAxis: NumericAxis(
                    minimum: _min,
                    maximum: _max,
                    isVisible: false,
                  ),
                  primaryYAxis: NumericAxis(isVisible: false),
                  plotAreaBorderWidth: 0,
                  series: <SplineAreaSeries<Data, double>>[
                    SplineAreaSeries<Data, double>(
                      color: Color.fromARGB(255, 126, 184, 253),
                      dataSource: _chartData,
                      xValueMapper: (Data sales, int index) => sales.x,
                      yValueMapper: (Data sales, int index) => sales.y)
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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