RTL Support

All RonakCN components are RTL-ready out of the box. Enabling right-to-left layout requires only a single widget at the root of your app.

Overview

Flutter uses a TextDirection value (either ltr or rtl) that flows down the widget tree via the Directionality widget. RonakCN components consume this value to mirror their layout — icons flip, paddings swap, and text aligns correctly without any additional configuration.

Enabling RTL

The easiest approach is to pass a locale to MaterialApp and let Flutter infer the text direction automatically:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Provide supported locales
      supportedLocales: const [
        Locale('en'),      // English (LTR)
        Locale('ar'),      // Arabic  (RTL)
        Locale('he'),      // Hebrew  (RTL)
        Locale('fa'),      // Persian (RTL)
      ],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: const HomePage(),
    );
  }
}

Add flutter_localizations to your pubspec.yaml dependencies to use the localisation delegates shown above.

`Directionality` widget

You can also force a specific direction for a subtree using the Directionality widget directly. This is useful for screens or sections that must always display in a given direction regardless of the device locale:

lib/widgets/arabic_section.dart

import 'package:flutter/material.dart';

class ArabicContentSection extends StatelessWidget {
  const ArabicContentSection({super.key, required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  }
}

Testing with Arabic text

Use the snippet below to quickly preview your layout with realistic Arabic content during development:

lib/pages/rtl_test_page.dart

import 'package:flutter/material.dart';
import '../components/button/button.dart';
import '../components/text_field/text_field.dart';

class RtlTestPage extends StatelessWidget {
  const RtlTestPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        appBar: AppBar(title: const Text('اختبار RTL')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RcnTextField(
                label: 'الاسم الكامل',
                hint: 'أدخل اسمك هنا',
              ),
              const SizedBox(height: 16),
              RcnTextField(
                label: 'البريد الإلكتروني',
                hint: 'example@domain.com',
                keyboardType: TextInputType.emailAddress,
              ),
              const SizedBox(height: 24),
              RcnButton(
                label: 'إرسال النموذج',
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Using directional helpers in custom widgets

When writing your own widgets, prefer directional layout helpers so they mirror correctly in RTL:

lib/widgets/my_widget.dart

// Prefer EdgeInsetsDirectional over EdgeInsets for asymmetric padding
padding: const EdgeInsetsDirectional.fromSTEB(16, 0, 8, 0),

// Prefer AlignmentDirectional over Alignment
alignment: AlignmentDirectional.centerStart,

// Check current direction when needed
final isRtl = Directionality.of(context) == TextDirection.rtl;

All RonakCN components already do this.

You only need these helpers when writing your own widgets that sit alongside RonakCN components.

Verifying RTL in Flutter DevTools

Open Flutter DevTools and navigate to the Widget Inspector. You can toggle the text direction from the toolbar to quickly check that your layout mirrors correctly without needing to change device locale.

terminal

# Start the app with DevTools attached
flutter run --debug