Flutter - How to customize Tab Bar view as below

user25160144
May 21, 2024
100 views
0 votes
2 Answers

Widget build(BuildContext context) {
    return SafeArea(
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                automaticallyImplyLeading: false,
                title: const Text(
                  'My Merchants',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 22,
                      fontWeight: FontWeight.w600,
                      fontFamily: '.SF UI Text'),
                ),
                actions: [
                  TextButton(
                      onPressed: () {},
                      child: const Text(
                        'Invite',
                        style: TextStyle(fontSize: 18),
                      ))
                ],
              ),
              body: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    // give the tab bar a height [can change hheight to preferred height]
                    Container(
                      height: 50,
                      decoration: BoxDecoration(
                        gradient: const LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color(0XFFD1E5D2),
                              Color(0XFFD2FBD4),
                              Color(0XFFD2FBD4),
                              Color(0XFFD2FCD4),
                            ]),
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(
                          10.0,
                        ),
                      ),
                      child: TabBar(
                        
                        dividerColor: Colors.white,
                        padding: const EdgeInsets.all(0),
                       
                        // give the indicator a decoration (color and border radius)
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(
                            10,
                          ),
                          color: Colors.green,
                        ),
                        labelColor: Colors.white,
                        unselectedLabelColor: Colors.black,
                        

                       
                        tabAlignment: TabAlignment.fill,
                        indicatorSize: TabBarIndicatorSize.tab,
                        tabs: const [
                          // first tab [you can add an icon using the icon property]
                        

                          Text(
                            'Merchants',
                            style: TextStyle(),
                          ),

                          // second tab [you can add an icon using the icon property]
                          Tab(
                            text: 'Merchnats Invitations',
                          ),
                          Tab(
                            text: 'My Inviations',
                          ),
                        ],
                      ),
                    ),
                    // tab bar view here
                    const Expanded(
                      child: TabBarView(
                      
                        children: [
                          // first tab bar view widget

                          Center(
                            child: Text(
                              'Merchants',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          // second tab bar view widget
                          Center(
                            child: Text(
                              'Merchnats Invitations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          Center(
                            child: Text(
                              'My Inviations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )));

Tab bar with buttons as selected and unselected

Tags: flutter user-interface

Answers

The solution below using custom tab

class MyMerchantsScreen extends StatefulWidget {
  const MyMerchantsScreen({super.key});

  @override
  State<MyMerchantsScreen> createState() => _MyMerchantsScreenState();
}

class _MyMerchantsScreenState extends State<MyMerchantsScreen> with SingleTickerProviderStateMixin {
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(_handleTabSelection);
  }

  void _handleTabSelection() => setState(() {});

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget _tabItem(int index, String title) {
    return Tab(
      child: Container(
        decoration: BoxDecoration(
          color: index == _tabController.index ? Colors.green : const Color(0XFFD1E5D2),
          borderRadius: BorderRadius.circular(10),
        ),
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
        child: Text(
          title,
          style: TextStyle(
            color: index == _tabController.index ? Colors.white : Colors.black,
          ),
          textAlign: TextAlign.center,
          maxLines: 2,
          overflow: TextOverflow.clip,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                centerTitle: false,
                automaticallyImplyLeading: false,
                title: const Text(
                  'My Merchants',
                  style: TextStyle(
                      color: Colors.black, fontSize: 22, fontWeight: FontWeight.w600, fontFamily: '.SF UI Text'),
                ),
                actions: [
                  TextButton(
                      onPressed: () {},
                      child: const Text(
                        'Invite',
                        style: TextStyle(fontSize: 18, color: Colors.black),
                      ))
                ],
              ),
              body: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    // give the tab bar a height [can change hheight to preferred height]
                    TabBar(
                      controller: _tabController,
                      onTap: (index) {},
                      dividerColor: Colors.white,
                      padding: const EdgeInsets.all(0),
                      indicator: const BoxDecoration(),
                      indicatorWeight: 0,
                      automaticIndicatorColorAdjustment: true,
                      labelPadding: const EdgeInsets.symmetric(horizontal: 4),
                      indicatorPadding: EdgeInsets.zero,
                      tabAlignment: TabAlignment.fill,
                      indicatorSize: TabBarIndicatorSize.tab,
                      tabs: [
                        _tabItem(0, 'Manage Merchants'),
                        _tabItem(1, 'Merchants Invitations'),
                        _tabItem(2, 'My Invitations'),
                      ],
                    ),
                    // tab bar view here
                    Expanded(
                      child: TabBarView(
                        controller: _tabController,
                        children: const [
                          // first tab bar view widget

                          Center(
                            child: Text(
                              'Merchants',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          // second tab bar view widget
                          Center(
                            child: Text(
                              'Merchants Invitations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),

                          Center(
                            child: Text(
                              'My Invitations',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )));
  }
}

No way than you have to custom your own tab

You can refer to this example below

Listen to tab body change to update UI tab header, and vice versa, handle click header to switch tab body

I’m using StreamBuilder instead of setState to rebuild only the necessary widgets

class _TestScreenState extends State<TestScreen> with SingleTickerProviderStateMixin {
  late final _tabController = TabController(length: 3, vsync: this);
  final _focusingIndex = StreamController<int>.broadcast();
  late final StreamSubscription _streamSubscription;

  @override
  void initState() {
    super.initState();
    _focusingIndex.add(0);
    _streamSubscription = _focusingIndex.stream.listen((index) {
      _tabController.animateTo(index);
    });
    _tabController.addListener(() {
      _focusingIndex.add(_tabController.index);
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    _streamSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Merchants'),
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            height: 50,
            child: StreamBuilder(
              stream: _focusingIndex.stream,
              builder: (_, snapshot) {
                final focusingIndex = snapshot.data ?? 0;
                return Row(
                  children: [
                    _buildTabBtn(focusingIndex, 0, 'Merchants'),
                    const SizedBox(width: 10),
                    _buildTabBtn(focusingIndex, 1, 'MerchantsnInvitations'),
                    const SizedBox(width: 10),
                    _buildTabBtn(focusingIndex, 2, 'My Invitations'),
                  ],
                );
              },
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: const [
                Center(
                  child: Text('Merchants'),
                ),
                Center(
                  child: Text('Merchants Invitations'),
                ),
                Center(
                  child: Text('My Invitations'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTabBtn(int focusingIndex, int index, String title) {
    return Expanded(
      child: GestureDetector(
        onTap: () => _focusingIndex.add(index),
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: focusingIndex == index ? Colors.green : Colors.green.withOpacity(0.5),
          ),
          child: Text(
            title,
            style: TextStyle(color: focusingIndex == index ? Colors.white : Colors.black),
          ),
        ),
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to customize Tab Bar view as below

Answers