Question 79300 in Flutter Question posted in
The official Flutter documentation can be found here.

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?

Tags:

2

Answers


  1. 0

    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,
),
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search