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?

What have you tried ? Where are you stuck ? Please read on how to ask https://stackoverflow.com/help/how-to-ask — void, Aug 07 '20 at 15:02
Can you add an Image of what you are trying to get looks like ? — void, Aug 07 '20 at 15:16
check this example https://flutter-widget.live/widgets/TabBar — Ridha Rezzag, Aug 07 '20 at 15:30

void · Accepted Answer · 2020-09-25T12:03:49.597

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:

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 !!! — Pawan, Sep 25 '20 at 12:01
Hi, you can ignore the height, the TabBarView takes up the remaining space available as it is wrapped with an Expanded widget. @Pawan — void, Sep 25 '20 at 12:03
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. @Pawan — void, Sep 25 '20 at 12:43
SliverFillRemaining worked. @void: Thank you so much.....Was stuck since 2 weeks. Thanks again. — Pawan, Sep 25 '20 at 12:58
Can you please help here: https://stackoverflow.com/q/64079801/2975475 — Pawan, Sep 26 '20 at 16:07

score 13 · Answer 2 · answered Aug 07 '20 at 15:44

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:

If profile height is variable? – Marcelo Juan Cabrera Gutierrez May 28 '23 at 01:08 — Marcelo Juan Cabrera Gutierrez, May 28 '23 at 01:08

score 0 · Answer 3 · answered Jul 22 '21 at 14:12

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),
                    ),
                  ),
                ),
              ),
            ],
          ),
        )

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

3 Answers3

Linked