I have the following simple TabBar, the tabs at the top are scrollable, I need to start the tabs list from Right To Left instead of Left To Right for RTL users because it looks a bad behavior to start from left for them.

Is this possible somehow with Flutter?

This is the code I tried:

body: SafeArea(
          child: GestureDetector(
              onTap: () => FocusScope.of(context).unfocus(),
              child: DefaultTabController(
                length: 7,
                initialIndex: 0,
                child: Column(
                  children: const [
                    TabBar(
                      isScrollable: true,
                      labelColor: Color(0xFFE41E26),
                      // labelStyle: Colors.blue,
                      indicatorColor: Colors.green,
                      tabs: [
                        Tab(
                          text: 'Title 1',
                        ),
                        Tab(
                          text: 'Title 2',
                        ),
                        Tab(
                          text: 'Title 3',
                        ),
                        Tab(
                          text: 'Title 4',
                        ),
                        Tab(
                          text: 'Title 5',
                        ),
                        Tab(
                          text: 'Title 6',
                        ),
                        Tab(
                          text: 'Title 7',
                        ),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        children: [
                          Text(
                            'Tab View 1',
                          ),
                          Text(
                            'Tab View 2',
                          ),
                          Text(
                            'Tab View 3',
                          ),
                          Text(
                            'Tab View 4',
                          ),
                          Text(
                            'Tab View 5',
                          ),
                          Text(
                            'Tab View 6',
                          ),
                          Text(
                            'Tab View 7',
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              )))

CodePudding user response：

Haven't tested it, but take a look here and also here. It should give you hints on how to achieve what you want.

CodePudding user response：

Solved after adding the required localization codes:

return const MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    AppLocalizations.delegate, // Add this line
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', ''), // English, no country code
    Locale('es', ''), // Spanish, no country code
  ],
  home: MyHomePage(),
);

More here: https://docs.flutter.dev/development/accessibility-and-localization/internationalization