Software Development Featured
Article

Building Arabic-First Mobile Apps with Flutter

Abdulaziz Yahya· ·8 min read

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

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:

// 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
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:

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:

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.

Tags Flutter Arabic RTL Mobile Development i18n Localization
More articles