Home > database >  How to change direction of dialog texts to RTL in Flutter?
How to change direction of dialog texts to RTL in Flutter?

Time:12-12

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?

CodePudding user response:

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

CodePudding user response:

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.

  • Related