Change the text direction in the AppBar from going LTR to RTL flutter

Question

I have an application that I'm building and in it, I have an AppBar. My text is in Arabic and I want to make the text place change from LTR (left-to-right) to RTL (right-to-left)

Here is a screenshot of the AppBar

And this is the code for my AppBar

class MyAppBar extends StatelessWidget with PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(kToolBarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        kAppBarTitleFirst,
      ),
    );
  }
}

So the question is:- How can I get the text عنوان التطبيق to be in the place of the red that I marked (see screenshot above)

Solution 1

Use textDirection property of Text widget.

class MyAppBar extends StatelessWidget with PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(kToolBarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        kAppBarTitleFirst,
        textDirection:TextDirection.rtl  // ← add this line
      ),
    ); 
  }
}

Solution 2

if you want Text direction right to left in your entire app and not just on the App Bar you can provide a Directionality to MaterialApp

MaterialApp(
 builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
);

Solution 3

force the whole app to be from left to right.

import 'package:flutter/material.dart';

void main(List<String> args) {
  return runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: Scaffold(
            appBar: AppBar(
              title: const Text(
                'عنوان التطبيق',
              ),
              backgroundColor: Colors.blue,
            ),
            backgroundColor: Colors.blue,
          ),
        );
      },
    ),
  );
}

also here is the changes on the orignal demo flutter

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Directionality( // <-- Add this Directionality
          textDirection: TextDirection.rtl,
          child: MyHomePage(title: 'الصفحة الرئيسية لعرض Flutter Demo')),
    );
  }
}

Comments

[Hussein Al-Mosawi]

Anyone who wants a better solution for this has to see the pinned answer and this answer stackoverflow.com/a/51639681/12831576 to get the full answer

[Anurag Tripathi]

I also found this stackoverflow.com/questions/50535185/… , might be helpful

[Hussein Al-Mosawi]

Sorry but this is not working... I'm not changing the TextDirection I just want to change the whole thing to the right

[Programmer_3]

Bur in your question,you mention that you want عنوان التطبيق` to be in the place of the red

[Hussein Al-Mosawi]

After seeing this answer stackoverflow.com/a/51639681/12831576 your answer makes sense to me