Two TabBars in one Screen in flutter

Question

I have two TabBars in one screen and when their TabBarViews are showing in half of the screen (view of first tabbar is showing upper half of the screen and seconf tabbar view is showing bottom half of the screen) but I want to display one TabBarView in full size of the screen. how will I achieve this?

This is the code of the screen where TabBar and TabBarViews are:

import 'package:betting_app/ui/betslip/betslip_active.dart';
import 'package:betting_app/ui/betslip/betslip_settled.dart';
import 'package:betting_app/ui/betslip/parlay_tab_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../core/constants/colors.dart';
import 'betslip_bottomsheet.dart';


class BetSlipTabBarView extends StatefulWidget {
  const BetSlipTabBarView({Key? key}) : super(key: key);

  @override
  State<BetSlipTabBarView> createState() => _BetSlipTabBarViewState();
}

class _BetSlipTabBarViewState extends State<BetSlipTabBarView> with TickerProviderStateMixin {

  final List<Tab> myTabs = const <Tab>[
    Tab(
      child: Center(
        child: Text(
          'Working', style: TextStyle(fontWeight: FontWeight.bold),

        ),
      ),
    ),
    Tab(
      child: Center(
        child: Text(
          'Active', style: TextStyle(fontWeight: FontWeight.bold)

        ),
      ),
    ),

    Tab(
      child: Center(
        child: Text(
          'Settled',
          style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ];

  final List<Tab> mySecondTabs = <Tab>[
    Tab(
      child: Center(
        child: Text(
          'Standard', style: TextStyle(fontWeight: FontWeight.bold),

        ),
      ),
    ),
    Tab(
      child: Center(
        child: Text(
            'Parlay', style: TextStyle(fontWeight: FontWeight.bold)

        ),
      ),
    ),

    Tab(
      child: Center(
        child: Text(
          'Teaser',
          style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ];

  late TabController _tabController;
  late TabController _secondTabbarController;
  int _selectedIndex = 0;
  int _otherSelectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
        vsync: this, length: myTabs.length, initialIndex: _selectedIndex);
            // Second TabBar Controller
    _secondTabbarController = TabController(
        vsync: this, length: mySecondTabs.length, initialIndex: _otherSelectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(

          children: [
            SizedBox(height: 5,),
            Row(
                children: [

                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 5,
                          offset: const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    height: MediaQuery.of(context).size.height * 0.06,
                    width: MediaQuery.of(context).size.width,
                    child: Row(

                        children:  [

                          const Padding(
                            padding: EdgeInsets.only(left: 13),
                            child: AspectRatio(
                              aspectRatio: 4 / 7,
                              child: CircleAvatar(
                                backgroundColor: AppColors.blueColor,
                                child: Text(
                                  "2",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Text(
                              "Betslip",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, color: AppColors.blueColor),
                            ),
                          ),

                          Padding(
                            padding: EdgeInsets.only(left: 200.0),
                            child: GestureDetector(

                              child: const Text("Close", style: TextStyle(color: AppColors.blueColor),),onTap: (){},),
                          )
                        ]),
                  ),
                ]),

            Container(

              margin: const EdgeInsets.only(top: 50),
              height: MediaQuery.of(context).size.height * 0.04,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                border: Border.all(width: .2, color: Colors.grey),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: const Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              child: Center(
                child: TabBar(
                  onTap: (int index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  controller: _tabController,
                  tabs: myTabs,
                  isScrollable: true,
                  labelColor: AppColors.black,
                  unselectedLabelColor: AppColors.tabBarColorUnselected,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorColor: Colors.transparent,

                ),
              ),
            ),

            SizedBox(height: 20,),

            Padding(
              padding: const EdgeInsets.only(right: 100.0),
              child: TabBar(
                onTap: (int index) {
                  setState(() {
                    _otherSelectedIndex = index;
                  });
                },
                controller: _secondTabbarController,
                tabs: mySecondTabs,
                isScrollable: true,
                labelColor: AppColors.black,
                unselectedLabelColor: AppColors.tabBarColorUnselected,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: Colors.transparent,

              ),
            ),

            ///////// Tab Bar View





             Expanded(
               child: TabBarView(
                  controller: _tabController,
                  children: const [
                    BetSlipBottomSheet(),
                    BetSlipActive(),
                    BetSlipSettled(),

                  ],
                ),
             ),


            Expanded(

                child: TabBarView(
                  controller: _secondTabbarController,
                  children:  [


                    Text(""),
                    ParlayTabView(),
                    SizedBox(),


                  ],
                ),

            ),

    ]),

        ),
      );
  }
}

Answer 1

Try below code hope its help to you, the first half section is first tabbar output and second halp section is second tabbar output.

Refer my answer here for tabbar

Refer Tabbar official documentaion

class TwoTabBar extends StatefulWidget {
  const TwoTabBar({Key key}) : super(key: key);

  @override
  State<TwoTabBar> createState() => _TwoTabBarState();
}

class _TwoTabBarState extends State<TwoTabBar> with TickerProviderStateMixin {
  TabController _tabController;
  TabController _tabController2;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Widget'),
        bottom: TabBar(
          controller: _tabController2,
          tabs: const <Widget>[
            Tab(
              icon: Icon(Icons.cloud_outlined),
            ),
            Tab(
              icon: Icon(Icons.beach_access_sharp),
            ),
            Tab(
              icon: Icon(Icons.brightness_5_sharp),
            ),
          ],
        ),
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  icon: Icon(Icons.person),
                ),
                Tab(
                  icon: Icon(
                    Icons.add,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.deck,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.child_care,
                  ),
                ),
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController2,
                children: const <Widget>[
                  Center(
                    child: Text("It's cloudy here"),
                  ),
                  Center(
                    child: Text("It's rainy here"),
                  ),
                  Center(
                    child: Text("It's sunny here"),
                  ),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                children: [
                  Center(
                    child: Text(
                      'Screen 1',
                    ),
       

       ),
              Center(
                child: Text(
                  'Screen 2',
                ),
              ),
              Center(
                child: Text(
                  'Screen 3',
                ),
              ),
              Center(
                child: Text(
                  'Screen 4',
                ),
              ),
            ],
            controller: _tabController,
          ),
        ),
      ],
    ),
  ),
);

} }

Result Screen->

Answer 2

Flutter allows this as per Flutter 3.10 (see What’s new in Flutter 3.10 for further reference)

Flutter now allows you to create a second tier of tabbed content. To distinguish this second TabBar, use TabBar.secondary.

Here's its documentation: TabBar.secondary

The following code taken from this link should achieve what you've asked for:

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(useMaterial3: true),
      home: const TabBarExample(),
    );
  }
}

class TabBarExample extends StatelessWidget {
  const TabBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Primary and secondary TabBar'),
          bottom: const TabBar(
            dividerColor: Colors.transparent,
            tabs: <Widget>[
              Tab(
                text: 'Flights',
                icon: Icon(Icons.flight),
              ),
              Tab(
                text: 'Trips',
                icon: Icon(Icons.luggage),
              ),
              Tab(
                text: 'Explore',
                icon: Icon(Icons.explore),
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            NestedTabBar('Flights'),
            NestedTabBar('Trips'),
            NestedTabBar('Explore'),
          ],
        ),
      ),
    );
  }
}

class NestedTabBar extends StatefulWidget {
  const NestedTabBar(this.outerTab, {super.key});

  final String outerTab;

  @override
  State<NestedTabBar> createState() => _NestedTabBarState();
}

class _NestedTabBarState extends State<NestedTabBar>
    with TickerProviderStateMixin {
  late final TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TabBar.secondary(
          controller: _tabController,
          tabs: const <Widget>[
            Tab(text: 'Overview'),
            Tab(text: 'Specifications'),
          ],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: <Widget>[
              Card(
                margin: const EdgeInsets.all(16.0),
                child: Center(child: Text('${widget.outerTab}: Overview tab')),
              ),
              Card(
                margin: const EdgeInsets.all(16.0),
                child: Center(
                    child: Text('${widget.outerTab}: Specifications tab')),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Result: