How to adjust the height of the TabBarView to the children in flutter?

user_17738188 0
Viewed 372
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          child: DefaultTabController(
            length: 2,
            child: Column(
              children: const [
                TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.cloud_outlined)),
                    Tab(icon: Icon(Icons.beach_access_sharp)),
                  ],
                ),
                SizedBox(
                  height: 300, // delete this.
                  child: TabBarView(
                    children: [
                      //ListView(shrinkWrap: true) ← and adjust the TabBarView to the height of this.
                      Text(''),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

I'm working on a card that allows you to switch the content with the TabBar.I would like to make the height of the TabBarView match the height of the children's ListView, but I get an error when I remove the SizedBox or use Expanded. Can you please advise me on the option of using other widgets as well?

dart flutter
1 Answers

Try this -

class MTabs extends StatefulWidget {
  @override
  _StackOverState createState() => _StackOverState();
}

class _StackOverState extends State<MTabs>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(8.0),
        color: Theme.of(context).primaryColor,
        child: Column(
          children: [
            // give the tab bar a height [can change height to preferred height]
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: Theme.of(context).backgroundColor,
                borderRadius: BorderRadius.circular(
                  25.0,
                ),
              ),
              child: TabBar(
                controller: _tabController,
                // give the indicator a decoration (color and border radius)
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    25.0,
                  ),
                  color: Theme.of(context).accentColor,
                ),
                labelColor: Theme.of(context).textSelectionColor,
                unselectedLabelColor: Theme.of(context).textSelectionColor,
                tabs: [
                  // first tab [you can add an icon using the icon property]
                  const Tab(
                    text: ViewStrings.txtTab1,
                  ),

                  // second tab [you can add an icon using the icon property]
                  const Tab(
                    text: ViewStrings.txtTab2,
                  ),
                  // second tab [you can add an icon using the icon property]
                  Tab(
                    text: ViewStrings.txtTab3,
                  ),
                ],
              ),
            ),
            // tab bar view here
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: const [
                  //  tab bar view widget
                  Tab1(),
                  Tab2(),
                  Tab3(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
user_164554210
Related