• 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
..
fix_data Loading commit data...
src Loading commit data...
analysis_options.yaml Loading commit data...
analysis_options_user.yaml Loading commit data...
animation.dart Loading commit data...
cupertino.dart Loading commit data...
foundation.dart Loading commit data...
gestures.dart Loading commit data...
material.dart Loading commit data...
painting.dart Loading commit data...
physics.dart Loading commit data...
rendering.dart Loading commit data...
scheduler.dart Loading commit data...
semantics.dart Loading commit data...
services.dart Loading commit data...
widgets.dart Loading commit data...