Bottom Overflowed By Pixels

Icaroto 0
Viewed 34

I'm trying to add a tab group in the middle of my screen, but I'm getting the Overflowed error.

This what I have

Expanded(
  child: Container(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(30),
        bottom: Radius.circular(0),
      ),
      color: Colors.blueGrey,
    ),
    child: ConstrainedBox(
      constraints: BoxConstraints(),
      child: DefaultTabController(
        length: 3,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              child: TabBar(tabs: [
                Tab(text: "Home"),
                Tab(text: "Articles"),
                Tab(text: "User"),
              ]),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(),
              child: Container(
                height: MediaQuery.of(context).size.height,
                child: TabBarView(children: [
                  Container(
                    child: Column(
                      children: [
                        Text("Home Body"),
                        Text("Home Body"),
                        Text("Home Body"),
                        Text("Home Body"),
                      ],
                    ),
                  ),
                  Container(
                    child: Text("Articles Body"),
                  ),
                  Container(
                    child: Text("User Body"),
                  ),
                ]),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),

If I got it right, the error is coming from this line

height: MediaQuery.of(context).size.height,

This is how it looks: enter image description here

but how can I sort it without adding a fixed value? (I assume giving a fixed value depending on the screen size I would have the same error right?)

----------------------------- Update:

This is what happens when adding leading: Container() enter image description here

flutter-layout flutter
3 Answers

Try the following code:

DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(30.0),
              bottom: Radius.circular(0.0),
            ),
          ),
          elevation: 0.0,
          backgroundColor: Colors.blueGrey,
          bottom: const TabBar(
            tabs: [
              Tab(text: "Home"),
              Tab(text: "Articles"),
              Tab(text: "User"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Column(
              children: const [
                Text("Home Body"),
                Text("Home Body"),
                Text("Home Body"),
                Text("Home Body"),
              ],
            ),
            const Text("Articles Body"),
            const Text("User Body"),
          ],
        ),
      ),
    ),
My Car0

It is very simple, you must to wrap the colum widget that locate in the TabarView children by the SingleChildScrolView and set primary: false,

Koffi Innocent Konan0

Playing around with the elements I found a solution that worked for me:

Expanded(
    child: Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(30),
          bottom: Radius.circular(0),
        ),
        color: Colors.blueGrey,
      ),
      child: DefaultTabController(
        length: 3,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const TabBar(tabs: [
              Tab(text: "Home"),
              Tab(text: "Articles"),
              Tab(text: "User"),
            ]),
            Expanded(
              child: SizedBox(
                height: MediaQuery.of(context).size.height,
                child: const TabBarView(children: [
                  Text("Home Body"),
                  Text("Articles Body"),
                  Text("User Body"),
                ]),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
],
Icaroto0
Related