Flutter: CupertinoTabScaffold with CupertinoTabBar creating RenderFlex overflow issue at bottom for TabBar in pushed screens

Question

I am an iOS developer, So I have idea how TabBarController works in iOS. Now I am working on Flutter (First APP).

I have an App which uses CupertinoApp-CupertinoTabScaffold-CupertinoTabBar to persist BottomNavigationBar in every nested screens.

My App's hierarchy

- CupertinoTabScaffold
-- CupertinoTabBar
--- Home
---- CupertinoPageScaffold (HomePage)
----- CupertinoPageScaffold (DetailPage pushed from home)
--- OtherTabs

To Push from HomePage to DetailPage, used below code:

Navigator.push(
              context,
              Platform.isIOS
                  ? CupertinoPageRoute(
                      builder: (context) => DetailPage(),
                    )
                  : MaterialPageRoute(
                      builder: (context) => DetailPage(),
                    ));

Now on detail screen I need Column for some view and GridView. So when GridView have more items, it gives error:

A RenderFlex overflowed by 56 pixels on the bottom.

Which is space of TabBar.

So how to manage such type of pages in Flutter, having TabBar and scrollable Widgets in nested screens?

I have followed this link.

DetailPage Code:

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        heroTag: 'detail 1',
        backgroundColor: Colors.white,
        transitionBetweenRoutes: false,
        middle: Text('Tab 1 detail',),
      ),
      child: Container(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Center(
                child: Text('Some Menus'),
              ),
            ),
            Container(
              child: GridView.builder(
                itemCount: 30,
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                    crossAxisCount: 2,
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4,
                    height: 160.0
                  ),
                  itemBuilder: (context, index) {
                  return Container(
                    child: Padding(
                      padding: EdgeInsets.all(6.0),
                      child: Container(
                          decoration: BoxDecoration(
                              color: Color(0xFF3C9CD9),
                              borderRadius: BorderRadius.all(Radius.circular(30.0)),
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Colors.black54,
                                    blurRadius: 2.0,
                                    offset: Offset(4, 3))
                              ]),
                          child: Padding(
                            padding: EdgeInsets.all(30.0),
                            child: Center(
                              child: Text('$index'),
                            ),
                          )),
                    ),
                  );
                  }
              ),
            )
          ],
        ),
      ),
    );
  }
}

Output:

Answer 1

wrap the Grid with with Expanded widget

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        heroTag: 'detail 1',
        backgroundColor: Colors.white,
        transitionBetweenRoutes: false,
        middle: Text('Tab 1 detail',),
      ),
      child: Container(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Center(
                child: Text('Some Menus'),
              ),
            ),
            Expanded(
              child: Container(
                child: GridView.builder(
                  itemCount: 30,
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                      crossAxisCount: 2,
                      crossAxisSpacing: 4,
                      mainAxisSpacing: 4,
                      height: 160.0
                    ),
                    itemBuilder: (context, index) {
                    return Container(
                      child: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Container(
                            decoration: BoxDecoration(
                                color: Color(0xFF3C9CD9),
                                borderRadius: BorderRadius.all(Radius.circular(30.0)),
                                boxShadow: <BoxShadow>[
                                  BoxShadow(
                                      color: Colors.black54,
                                      blurRadius: 2.0,
                                      offset: Offset(4, 3))
                                ]),
                            child: Padding(
                              padding: EdgeInsets.all(30.0),
                              child: Center(
                                child: Text('$index'),
                              ),
                            )),
                      ),
                    );
                    }
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}