the Directionality( textDirection: TextDirection.rtl, ) doesn't work in flutter

427

try to use flutter_localizations

add this to your pubspec:

  flutter_localizations:
    sdk: flutter

and then in your main file add those to your MaterialApp widget

localizationsDelegates: [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale("ar", "YE"), // OR Locale('ar', 'AE') OR Other RTL locales
      ],
Share:
427
Mariam Younes
Author by

Mariam Younes

Updated on December 29, 2022

Comments

  • Mariam Younes
    Mariam Younes 10 months

    In my app I'm using rtl direction in the fist 4 pages it work fine but after adding BottomNavigationBar and its widgets the widget doesn't response for any direction or any column effect else

    this is my code for BottomNavigationBar

    bottomNavigationBar: BottomAppBar(
              shape: CircularNotchedRectangle(),
              child: Container(
                // height: MediaQuery.of(context).size.height * .1,
                child: BottomNavigationBar(
                  type: BottomNavigationBarType.fixed,
                  selectedItemColor: Colors.orange,
                  selectedFontSize: 0,
                  unselectedFontSize: 0,
                  showSelectedLabels: false,
                  showUnselectedLabels: false,
                  //iconSize: 22,
                  elevation: 0,
                  backgroundColor: Colors.transparent,
                  // selectedIconTheme: IconThemeData(
                  //   color: Colors.orange,
                  // ),
                  // unselectedItemColor: Colors.grey,
                  currentIndex: widget.currentTab,
                  onTap: (int i) {
                    print(i);
                    this._selectTab(i);
                  },
                  // this will be set when a new tab is tapped
                  items: [
                    BottomNavigationBarItem(
                      icon: Container(
                        margin: EdgeInsets.all(0),
                        padding: EdgeInsets.only(left: 20),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Image.asset(
                              "assets/images/home.png",
                              height: 20,
                              width: 20,
                              fit: BoxFit.contain,
                              color: Colors.grey,
                            ),
                            Text(
                              'الرئيسية',
                              style: TextStyle(color: Colors.grey, fontSize: 10),
                            )
                          ],
                        ),
                      ),
                      activeIcon: Container(
                        margin: EdgeInsets.all(0),
                        padding: EdgeInsets.only(left: 20),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            new Image.asset(
                              "assets/images/home.png",
                              height: 20,
                              width: 20,
                              fit: BoxFit.contain,
                              color: Color.fromRGBO(255, 187, 17, 1),
                            ),
                            Text(
                              'الرئيسية',
                              style: TextStyle(
                                  color: Color.fromRGBO(255, 187, 17, 1),
                                  fontSize: 12),
                            )
                          ],
                        ),
                      ),
                      label: '',
                    ),
                  ],
                ),
              ),
            ),
    

    and this code for the first page

    Directionality(
          textDirection: TextDirection.rtl,
          child: Scaffold(
            //backgroundColor: Colors.white,
            //resizeToAvoidBottomInset: false,
            body: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.end,
                // crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                      child: Column(
                    children: [
                      SizedBox(
                        height: MediaQuery.of(context).size.height * .05,
                      ),
                      Text(
                        ", أهلا محمود",
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        "اختر الخدمة المناسبة لك",
                        style: TextStyle(
                            fontSize: 14, color: Color.fromRGBO(138, 138, 138, 1)),
                      ),
                      SizedBox(
                        height: MediaQuery.of(context).size.height * .05,
                      ),
                    ],
                  ))
                ],
              ),
            ),
          ),
        );
    

    so anyone has an idea about this problem !!!