Right-to-Left (RTL) in Flutter Range Selector (SfRangeSelector)

18 Nov 20184 minutes to read

NOTE

RTL is not applicable for the vertical orientation of the Flutter Range Selector.

RTL rendering ways

Right-to-left rendering can be achieved in the following ways:

Wrapping the SfRangeSelector with Directionality widget

The Flutter Range Selector can be wrapped inside the Directionality widget and you can set the textDirection property to rtl.

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

class RtlDirectionalitySample extends StatefulWidget {
  @override
  _RtlDirectionalitySampleState createState() => _RtlDirectionalitySampleState();
}

class _RtlDirectionalitySampleState extends State<RtlDirectionalitySample> {
  SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Directionality(
          textDirection: TextDirection.rtl,
          child: Center(
            child: SfRangeSelector(
              min: 2.0,
              max: 10.0,
              interval: 1,
              showLabels: true,
              showTicks: true,
              initialValues: _initialValues,
              child: Container(
                color: Colors.pink[200],
                height: 150,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Changing the locale to RTL languages

The Flutter Range Selector will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. This can be achieved by specifying the MaterialApp properties such as localizationsDelegates, supportedLocales, locale and adding the flutter_localizations package to your pubspec.yaml file.

dependencies:
  flutter_localizations:
    sdk: flutter
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class RtlLocaleSample extends StatefulWidget {
  @override
  _RtlLocaleSampleState createState() => _RtlLocaleSampleState();
}

class _RtlLocaleSampleState extends State<RtlLocaleSample> {
  SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale("fa", "IR"),
      ],
      locale: Locale("fa", "IR"),
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SfRangeSelector(
          min: 2.0,
          max: 10.0,
          interval: 1,
          showLabels: true,
          showTicks: true,
          initialValues: _initialValues,
          child: Container(
            color: Colors.pink[200],
            height: 150,
          ),
        ),
      ),
    );
  }
}

RTL support