How to create a tab bar at center of the screen in flutter?

Question

I'm trying to create a tab bar at the center of the screen using flutter while trying it I gave TabBarView in a column and I was stuck in this error. Please resolve this.

I/flutter ( 3983): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3983): The following assertion was thrown during performResize():
I/flutter ( 3983): Horizontal viewport was given unbounded height.
I/flutter ( 3983): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter ( 3983): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter ( 3983): vertical space in which to expand.

The source code is

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            child: Column(crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  height: 40,
                ),DefaultTabController(
                  length: 2,
                  child: Column(children: [TabBar(
                      unselectedLabelColor: Colors.black,
                      labelColor: Colors.red,
                      tabs: <Widget>[
                        Tab(
                          icon: Icon(Icons.people),
                        ),
                        Tab(
                          icon: Icon(Icons.person),
                        )
                      ],controller: _tabController,
                      indicatorSize: TabBarIndicatorSize.tab,
                    ),TabBarView(
                      children: <Widget>[Text('people'), Text('Person')],
                      controller: _tabController,
                    ),
                  ]),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

You can see the above model of the image what I'm trying to achieve. I've tried many things but I've stuck here.

How to rectify this error and how to create a tab bar at the center of my screen?

Merrick

What have you tried ? Where are you stuck ? Please read on how to ask stackoverflow.com/help/how-to-ask – Breda

@Derek Here, I have updated my error and code! – Merrick

Can you add an Image of what you are trying to get looks like ? – Breda

@Derek Yes, I've updated the image Too... – Merrick

check this example flutter-widget.live/widgets/TabBar – Bisectrix

Thank you. Was stuck since 2 weeks. – Dodiedodo

Answer 1

I added a demo of what you are trying to get (I followed the Image you posted):

NOTE : I had to make few changes to the way you arranged your widget tree.

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage> {
 
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'My Profile',
          ),
          centerTitle: true,
          backgroundColor: Colors.grey[700].withOpacity(0.4),
          elevation: 0,
          // give the app bar rounded corners
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
            ),
          ),
          leading: Icon(
            Icons.menu,
          ),
        ),
        body: Column(
          children: <Widget>[
            // construct the profile details widget here
            SizedBox(
              height: 180,
              child: Center(
                child: Text(
                  'Profile Details Goes here',
                ),
              ),
            ),

            // the tab bar with two items
            SizedBox(
              height: 50,
              child: AppBar(
                bottom: TabBar(
                  tabs: [
                    Tab(
                      icon: Icon(Icons.directions_bike),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.directions_car,
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // create widgets for each tab bar here
            Expanded(
              child: TabBarView(
                children: [
                  // first tab bar view widget
                  Container(
                     color: Colors.red,
                    child: Center(
                      child: Text(
                        'Bike',
                      ),
                    ),
                  ),

                  // second tab bar viiew widget
                  Container(
                     color: Colors.pink,
                    child: Center(
                      child: Text(
                        'Car',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

OUTPUT:

Breda

01. Thanks, was stuck since last 2 weeks on the same. 02. Under TabBarView, how can we make the height dynamic ?? In this current example, we have hardcoded 80 !!! – Dodiedodo

Hi, you can ignore the height, the TabBarView takes up the remaining space available as it is wrapped with an Expanded widget. @Dodiedodo – Breda

Actually i am using Sliver. So...it is creating problem :'( – Dodiedodo

You can use the SliverFillRemaining widget which takes up the remaining space available in your CustomScrollView. You can do that and let me know if it works. @Dodiedodo – Breda

SliverFillRemaining worked. @void: Thank you so much.....Was stuck since 2 weeks. Thanks again. – Dodiedodo

Can you please help here: https://mcmap.net/q/665540/-sliver-with-tabbarview-amp-sliverfillremaining-gives-bottom-overflowed-by-xxx-pixels/2975475 – Dodiedodo

Answer 2

To put the TabBar at the center of the screen, your Profile Container's height should be the screen height divided by 2

Like this

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: MediaQuery.of(context).size.height /2,
              child: Center(child: Text("Profile"),),
              color: Colors.blue,
            ),
            TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  icon: Icon(Icons.people),
                ),
                Tab(
                  icon: Icon(Icons.person),
                )
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            Expanded(
              child: TabBarView(
                children: [Text('people'), Text('Person')],
                controller: _tabController,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Result:

Gregoire

If profile height is variable? – Witmer

Answer 3

Also can try this,

AppBar(
          leading: IconButton(
            constraints: BoxConstraints(),
            padding: EdgeInsets.zero,
            icon: Container(
              padding: EdgeInsets.fromLTRB(10, 5, 0, 5),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(20)),
                // color: MyColors.primaryColorLight.withAlpha(20),
                color: Colors.white,
              ),
              child: Icon(
                Icons.arrow_back_ios,
                color: kPrimaryColor,
                // size: 16,
              ),
            ),
            onPressed: () => Navigator.of(context).pop(),
          ),
          backgroundColor: kPrimaryColor,
          toolbarHeight: 80,
          elevation: 5.0,
          title: TabBar(//Add tab bar to title
            indicator: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                color: Colors.white),
            labelColor: kPrimaryColor,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            tabs: [
              Container(
                height: 30.0,
                width: 100,
                child: Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Ongoing",
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ),
              ),
              Container(
                width: 100,
                height: 30.0,
                child: Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Requests",
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ),
              ),
            ],
          ),
        )

Biskra