skip to Main Content
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

enter image description here

2

Answers


  1. 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,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                )));
      }
    }
    
    Login or Signup to reply.
  2. 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),
              ),
            ),
          ),
        );
      }
    }
    

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search