• Taha Tesser's avatar
    Fix scrollable `TabBar` expands to full width when the divider is removed (#140963) · 88016c11
    Taha Tesser authored
    fixes [TabBar Expands to full width of the screen isScrollable: true after upgrading to flutter 3.16.4](https://github.com/flutter/flutter/issues/140338)
    
    ---
    
    ## Description
    
    Fixes the scrollable `TabBar` width when the divider is removed. (when the divider height is set to `0` or divider color is set to `Colors.transparent`)
    
    ### Code sample
    
    <details>
    <summary>expand to view the code sample</summary> 
    
    ```dart
    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        const int tabsCount = 2;
    
        return MaterialApp(
          home: DefaultTabController(
            initialIndex: 1,
            length: tabsCount,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('TabBar Sample'),
                bottom: PreferredSize(
                  preferredSize: const Size.fromHeight(48.0),
                  child: ColoredBox(
                    color: Theme.of(context).colorScheme.secondaryContainer,
                    child:  TabBar(
                      // dividerColor: Theme.of(context).colorScheme.onSurface,
                      dividerColor: Colors.transparent, // remove divider
                      // dividerHeight: 0, // remove divider
                      isScrollable: true,
                      tabAlignment: TabAlignment.center,
                      tabs: <Widget>[
                        for (int i = 0; i < tabsCount; i++)
                          Tab(
                            text: 'Tab $i',
                          ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    ```
    
    </details>
    
    ### Before
    ![Simulator Screenshot - iPhone 15 Pro - 2024-01-04 at 15 16 15](https://github.com/flutter/flutter/assets/48603081/b776e7e6-e5f0-49df-8a79-55032eaad631)
    
    ### After
    ![Simulator Screenshot - iPhone 15 Pro - 2024-01-04 at 15 16 23](https://github.com/flutter/flutter/assets/48603081/9ad13793-43a9-4ae8-977e-7cf84cb59bb1)
    88016c11
tabs_test.dart 246 KB