CODEWITHSUNDEEP
flutterdartflutter-appbar
Hussein Al-Mosawi
Hussein Al-Mosawi

Reputation: 1674

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

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

enter image description here

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)

Upvotes: 2

Views: 6855

Answers (4)

Erfan
Erfan

Reputation: 3343

i think that answer not working! Directionality Widget not working with appBar title text . but we can use appbar actions: <Widget> property, so best way is remove title appbar and use Directionality inside actions: <Widget>. below code work fine with Rtl Text Appbar :

  appBar: AppBar(

    actions: <Widget>[

      Directionality(textDirection: TextDirection.rtl, child: Text("سلام")),

    ], 
    backgroundColor: Colors.greenAccent[400],
    elevation: 50.0,
    leading: IconButton(
      icon: const Icon(Icons.person),
      tooltip: 'Menu Icon',
      onPressed: () {},
    ),
    systemOverlayStyle: SystemUiOverlayStyle.light,
  ),

Upvotes: 0

Abdullah Bahattab
Abdullah Bahattab

Reputation: 716

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

Upvotes: 1

Programmer_3
Programmer_3

Reputation: 530

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

Upvotes: 0

Anurag Tripathi
Anurag Tripathi

Reputation: 785

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

Upvotes: 8

Related Questions