skip to Main Content

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?

2

Answers


  1. 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. 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