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)

Anyone who wants a better solution for this has to see the pinned answer and this answer https://stackoverflow.com/a/51639681/12831576 to get the full answer — Hussein Al-Mosawi, Sep 03 '20 at 14:02
I also found this https://stackoverflow.com/questions/50535185/right-to-left-rtl-in-flutter , might be helpful — Anurag Tripathi, Sep 03 '20 at 14:10

score 7 · Answer 1 · answered Sep 03 '20 at 13:25

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,
    );
  },
);

Abdullah Bahattab · Answer 2 · 2021-10-21T19:22:32.087

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')),
    );
  }
}

score 0 · Accepted Answer · edited Apr 04 '21 at 12:24

0

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
      ),
    ); 
  }
}

edited Apr 04 '21 at 12:24

Gimmly

443
1
6
15

answered Sep 03 '20 at 13:16

Programmer_3

522
5
18

1

Sorry but this is not working... I'm not changing the TextDirection I just want to change the whole thing to the right – Hussein Al-Mosawi Sep 03 '20 at 13:37
Bur in your question,you mention that you want عنوان التطبيق` to be in the place of the red – Programmer_3 Sep 03 '20 at 13:40
1

After seeing this answer https://stackoverflow.com/a/51639681/12831576 your answer makes sense to me – Hussein Al-Mosawi Sep 03 '20 at 13:50

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

3 Answers3