CODEWITHSUNDEEP
flutter
Alex Wright
Alex Wright

Reputation: 627

How to change direction of dialog texts to RTL in Flutter?

I have the following codes in my login page:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: . . .
        .
        .
        .
         showDialog(
             context: context,
             barrierDismissible: false,
             builder: (context) => AlertDialog(
             title: const Text('خطا'),
             content: Text('جهت تست'),
             actions: [
                TextButton(
                onPressed: () {
                       Navigator.pop(context);
                       },
                       child: const Text("تایید"))
                   ],
                ),
            );
}

When I run the code, everything is in RTL mode but the dialog is in LTR mode. How can I make it RTL?

Upvotes: 1

Views: 1167

Answers (3)

Devarsh Panchal
Devarsh Panchal

Reputation: 16

Just replace [textDirection: TextDirection.rtl] to [textAlign: TextAlign.right] because TextDirection.rtl cause special character-related problem https://github.com/flutter/flutter/issues/133317

TextField(
          textAlign: TextAlign.right,
          decoration: InputDecoration(
            labelText: "Enter Name",
          ),
        )

Upvotes: 0

Gwhyyy
Gwhyyy

Reputation: 9166

wrap the widget returned in the showDialog with a Directionality:

showDialog(
             context: context,
             barrierDismissible: false,
             builder: (context) => Directionality(textDirection: /* your text direction*/, child: AlertDialog(
             title: const Text('خطا'),
             content: Text('جهت تست'),
             actions: [
                TextButton(
                onPressed: () {
                       Navigator.pop(context);
                       },
                       child: const Text("تایید"))
                   ],
                ),
            ),);

With changing /* your text direction*/ with your desired direction.

Upvotes: 3

BouhaaCode
BouhaaCode

Reputation: 99

The best and shortest way to set RTL configuration for the entire app.

void main() {
  runApp(
    MaterialApp(
      home: Directionality( // add this
        textDirection: TextDirection.rtl, // set this property 
        child: HomePage(),
      ),
    ),
  );
}

If you need to display text in reverse direction then just set it's textdirection property to TextDirection.rtl.

OR :

Example code for TextField widget,

TextField(
  textDirection: TextDirection.rtl,
  decoration: InputDecoration(
    labelText: "Enter Pashto Name",
  ),
),

Example code for Text widget,

Text(
  "This text is in the other direction!"
  textDirection: TextDirection.rtl,
),

Upvotes: 3

Related Questions