Building Arabic-First Mobile Apps with Flutter

## Why Arabic-First Matters Most mobile apps are built in English first, then "localized" to Arabic as an afterthought. The result? Mirrored layouts that feel awkward, fonts that look wrong at small sizes, and date formats that confuse users. At AzizWares, we flip the script: we design for Arabic first, then adapt for English. This isn't just ideology — it's practical. The Arabic-speaking market has over 400 million native speakers and is one of the fastest-growing mobile markets in the world. Building Arabic-first means your app feels native to the majority of your users from day one. ## Setting Up Flutter for RTL Flutter has excellent built-in support for RTL (Right-to-Left) layouts, but you need to set it up correctly from the start. ### 1. Configure MaterialApp for Localization ```dart MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ Locale('ar'), // Arabic first! Locale('en'), ], locale: Locale('ar'), // Default to Arabic ) ``` ### 2. Use Directional Widgets Replace `Padding` with `EdgeInsetsDirectional` and `Align` with `AlignmentDirectional`: ```dart // Bad: hardcoded LTR padding Padding(padding: EdgeInsets.only(left: 16)) // Good: direction-aware padding Padding(padding: EdgeInsetsDirectional.only(start: 16)) ``` ### 3. Arabic Typography Best Practices Arabic text requires different typographic treatment than Latin text: - **Font size:** Arabic fonts generally need to be 10-15% larger than their English equivalents for the same readability - **Line height:** Use at least 1.6x for Arabic body text (compared to 1.4x for English) - **Font family:** We recommend Noto Sans Arabic or IBM Plex Arabic for UI text, and Amiri for decorative headings - **Letter spacing:** Arabic text should have zero or negative letter spacing — never positive ```dart TextStyle arabicBody = TextStyle( fontFamily: 'NotoSansArabic', fontSize: 16, height: 1.7, letterSpacing: 0, ); ``` ## Locale-Aware Formatting Dates, numbers, and currencies must respect the user's locale: ```dart import 'package:intl/intl.dart'; // Arabic date formatting final dateFormatter = DateFormat.yMMMMd('ar'); print(dateFormatter.format(DateTime.now())); // Output: ١٥ فبراير ٢٠٢٦ // Arabic number formatting final numberFormatter = NumberFormat('#,##0', 'ar'); print(numberFormatter.format(1500)); // Output: ١٬٥٠٠ ``` ## Islamic Calendar Integration Many Arabic apps need Hijri calendar support. We use the `hijri_calendar` package: ```dart import 'package:hijri_calendar/hijri_calendar.dart'; final hijri = HijriCalendar.now(); print('${hijri.hDay} ${hijri.longMonthName} ${hijri.hYear}'); ``` In our apps like **Jummal Calculator** and **SakinahLoop**, we display both Hijri and Gregorian dates side by side, letting users see the date in whichever system feels natural to them. ## Testing Arabic Layouts Always test your app with: 1. **Long Arabic text** — Arabic words can be much longer than English 2. **Mixed content** — Arabic text with English brand names or numbers 3. **Edge cases** — Empty states, error messages, and loading screens in Arabic 4. **Different devices** — Arabic text rendering varies across Android OEMs ## Real-World Example: Q-Arabi Our app **Q-Arabi** (القارئ العربي) is a reading companion designed Arabic-first. Every interaction — from the page-turn animation direction to the bookmark icon placement — was designed for RTL users first. The English version is a mirror, not the other way around. ## Conclusion Building Arabic-first isn't harder — it's different. Flutter makes it straightforward with its built-in RTL support, but the real work is in the design decisions: typography, spacing, cultural expectations, and testing. Start Arabic-first, and you'll build better apps for everyone. --- *Abdulaziz Yahya is the founder of AzizWares, a Saudi software studio building Arabic-first mobile apps. Follow our work at [azizwares.com](https://azizwares.com).*