Home > Enterprise >  I want to use all the remaining space in the column, but I get an error if I don't specify the
I want to use all the remaining space in the column, but I get an error if I don't specify the

Time:06-16

I'm writing code like below, but I get an error that "RenderFlex children have non-zero flex but incoming height constraints are unbounded.".

I know I should remove 1 and uncomment 2 as a workaround.

But I want to use all the remaining heights of the Column, what should I do?

    final he = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Container(
        height: he,
        child: Column(
          children: [
            LiveScore(), <----This does not specify the height
            DefaultTabController(
              length: 5,
              initialIndex: 0,
              child: Column(
                children: [
                  TabBar(
                    labelStyle: TextStyle(fontSize: 10),
                    labelColor: Colors.green,
                    unselectedLabelColor: Colors.black,
                    tabs: [
                      Tab(text: 'Home'),
                      Tab(text: 'Away'),
                      Tab(text: 'guess'),
                      Tab(text: 'stats'),
                      Tab(text: 'line-up'),
                    ],
                  ),
                  Expanded(<------------------------------------ 1
                    child: Container(
                      // height: he*0.3, <---------------------- 2
                      child: TabBarView(
                        children: [
                          TimeLine(),
                          TimeLine(),
                          TimeLine(),
                          TimeLine(),
                          TimeLine(),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );

CodePudding user response:

final he = MediaQuery.of(context).size.height;

return Scaffold(
  body: Container(
    height: he,
    child: Column(
      children: [
        LiveScore(),
        // Expanded here will take all the remaining space in the column for DefaultTabController.
        DefaultTabController(
          length: 5,
          initialIndex: 0,
          child: Column(
            children: [
              TabBar(
                labelStyle: TextStyle(fontSize: 10),
                labelColor: Colors.green,
                unselectedLabelColor: Colors.black,
                tabs: [
                  Tab(text: 'Home'),
                  Tab(text: 'Away'),
                  Tab(text: 'guess'),
                  Tab(text: 'stats'),
                  Tab(text: 'line-up'),
                ],
              ),
              // Expanded here will take all the remaining space in the column for TabBarView. No need Container.
              Expanded(<------------------------------------ 1
                  child: TabBarView(
                    children: [
                      TimeLine(),
                      TimeLine(),
                      TimeLine(),
                      TimeLine(),
                      TimeLine(),
                    ],
                  ),
                
              )
            ],
          ),
        )
      ],
    ),
  ),
);
  • Related