zeba_academy_arabic_rtl_ui

RTL & Arabic optimized UI toolkit for Flutter applications.

A production‑ready Flutter package designed to simplify building Arabic, Islamic, and Right‑to‑Left (RTL) user interfaces. This toolkit automatically adapts layouts, typography, and widgets for RTL languages while providing reusable Islamic‑style UI components.

✨ Features

✅ Automatic RTL Support

  • Detects text direction using Flutter Directionality
  • Works seamlessly with Arabic locales
  • No manual RTL handling required

✅ Arabic Typography Helpers

  • Preconfigured Arabic text widget
  • RTL text direction enforced automatically
  • Elegant Arabic font styling support

✅ Islamic Decorative Widgets

  • Islamic themed container
  • Decorative divider for Islamic UI layouts
  • Clean minimal design system

✅ Direction‑Aware Layout Helpers

  • RTL-aware Row & Column widgets
  • Automatically respects layout direction
  • Cleaner multilingual UI code

📦 Installation

Add dependency to your pubspec.yaml:

dependencies:
  zeba_academy_arabic_rtl_ui: ^0.0.1

Then run:

flutter pub get

🚀 Quick Start

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      locale: Locale('ar'),
      home: ExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Arabic RTL UI')),
      body: Center(
        child: DirectionAwareColumn(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            ArabicText('السلام عليكم'),
            SizedBox(height: 20),
            IslamicContainer(
              child: ArabicText('مرحبا بكم'),
            ),
            SizedBox(height: 20),
            IslamicDivider(),
          ],
        ),
      ),
    );
  }
}

🧩 Widgets Overview

ArabicText

Arabic optimized text widget with RTL direction and typography.

ArabicText(
  'السلام عليكم',
  fontSize: 20,
)

IslamicContainer

Reusable Islamic styled container.

IslamicContainer(
  child: ArabicText('Example'),
)

IslamicDivider

Decorative divider for Islamic layouts.

IslamicDivider()

DirectionAwareRow

Automatically adapts layout direction.

DirectionAwareRow(
  children: [Text('A'), Text('B')],
)

DirectionAwareColumn

RTL-aware column layout.

DirectionAwareColumn(
  children: [Text('1'), Text('2')],
)

🧠 RTL Helper

Check direction programmatically:

bool isRTL = RTLHelper.isRTL(context);

📂 Package Structure

lib/
 ├── zeba_academy_arabic_rtl_ui.dart
 └── src/
     ├── rtl_helper.dart
     ├── arabic_text.dart
     ├── decorative_widgets.dart
     └── layout_helper.dart

🧪 Testing

Run tests using:

flutter test

All core widgets and RTL behaviors are covered with widget tests.

🎯 Use Cases

  • Islamic applications
  • Quran & Hadith apps
  • Arabic learning platforms
  • Multilingual Flutter apps
  • RTL-first mobile applications

🔮 Roadmap

  • Auto RTL detection from Locale
  • Quran verse widgets
  • Islamic AppBar & Card components
  • RTL navigation transitions
  • Direction-aware padding extensions

🤝 Contributing

Contributions are welcome!

  1. Fork the repository
  2. Create a feature branch
  3. Commit changes
  4. Submit a pull request

📄 License

GPL License

👨‍💻 Maintained by

Zeba Academy

Building Flutter tools for education, Islamic apps, and multilingual UI systems.

Libraries

zeba_academy_arabic_rtl_ui