Flutter：带有 CupertinoTabBar 的 CupertinoTabScaffold 在推送屏幕中的 TabBar 底部创建 RenderFlex 溢出问题

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'),
                              ),
                            )),
                      ),
                    );
                    }
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}