• Taha Tesser's avatar
    Fix Material 3 Scrollable `TabBar` (#125974) · 32fde139
    Taha Tesser authored
    fix https://github.com/flutter/flutter/issues/117722
    
    ### Description
    1. Fix the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
    2. Add `dividerHeight` property.
    3. Update the default tab alignment for the scrollable tab bar to match the specs (this is backward compatible for M2 with the new `tabAlignment` property).
    
    ### Bug (default tab alignment)
    
    ![Screenshot 2023-05-05 at 19 04 40](https://user-images.githubusercontent.com/48603081/236509483-1d03af21-a764-4776-acef-2126560f0d51.png)
    
    ### Fix (default tab alignment)
    
    ![Screenshot 2023-05-05 at 19 04 15](https://user-images.githubusercontent.com/48603081/236509513-2426d456-c54f-42bd-9545-a14dc6ee7e69.png)
    
    ### Code sample
    
    <details> 
    <summary>code sample</summary> 
    
    ```dart
    import 'package:flutter/material.dart';
    
    /// Flutter code sample for [TabBar].
    
    void main() => runApp(const TabBarApp());
    
    class TabBarApp extends StatelessWidget {
      const TabBarApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(
            //  tabBarTheme: const TabBarTheme(tabAlignment: TabAlignment.start),
              useMaterial3: true,
          ),
          home: const TabBarExample(),
        );
      }
    }
    
    class TabBarExample extends StatefulWidget {
      const TabBarExample({super.key});
    
      @override
      State<TabBarExample> createState() => _TabBarExampleState();
    }
    
    class _TabBarExampleState extends State<TabBarExample> {
      bool rtl = false;
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          initialIndex: 1,
          length: 3,
          child: Directionality(
            textDirection:  rtl ? TextDirection.rtl : TextDirection.ltr,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('TabBar Sample'),
              ),
              body: const Column(
                children: <Widget>[
                  Text('Scrollable-TabAlignment.start'),
                  TabBar(
                    isScrollable: true,
                    tabAlignment: TabAlignment.start,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                  Text('Scrollable-TabAlignment.startOffset'),
                  TabBar(
                    isScrollable: true,
                    tabAlignment: TabAlignment.startOffset,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                  Text('Scrollable-TabAlignment.center'),
                  TabBar(
                    isScrollable: true,
                    tabAlignment: TabAlignment.center,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                  Spacer(),
                  Text('Non-scrollable-TabAlignment.fill'),
                  TabBar(
                    tabAlignment: TabAlignment.fill,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                  Text('Non-scrollable-TabAlignment.center'),
                  TabBar(
                    tabAlignment: TabAlignment.center,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                  Spacer(),
                ],
              ),
              floatingActionButton: FloatingActionButton.extended(
                onPressed: () {
                  setState(() {
                    rtl = !rtl;
                  });
                },
                label: const Text('Switch Direction'),
                icon: const Icon(Icons.swap_horiz),
              ),
            ),
          ),
        );
      }
    }
    ``` 
    	
    </details>
    
    ![Screenshot 2023-06-06 at 18 06 12](https://github.com/flutter/flutter/assets/48603081/5ee5386d-cc64-4025-a020-ed2222cb6031)
    32fde139
Name
Last commit
Last update
.github Loading commit data...
.vscode Loading commit data...
bin Loading commit data...
dev Loading commit data...
examples Loading commit data...
packages Loading commit data...
.ci.yaml Loading commit data...
.cirrus.yml Loading commit data...
.gitattributes Loading commit data...
.gitignore Loading commit data...
AUTHORS Loading commit data...
CODEOWNERS Loading commit data...
CODE_OF_CONDUCT.md Loading commit data...
CONTRIBUTING.md Loading commit data...
LICENSE Loading commit data...
PATENT_GRANT Loading commit data...
README.md Loading commit data...
TESTOWNERS Loading commit data...
analysis_options.yaml Loading commit data...
dartdoc_options.yaml Loading commit data...
flutter_console.bat Loading commit data...