如何在 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?

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:

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:

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