RenderFlex Overflow problem when scrolling using SliverAppBar and SliverList

Question

I am encountring a overflow problem within SLiverlist. I have SliverAppBar that callapsed when scrolling the SliverList but at a moment I encounter the RenderFlex overflow by 337 pixels on bottom.

Here is the code:

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 9,
        child: Scaffold(
          body: CustomScrollView(
            slivers: [
              SliverAppBar(
                backgroundColor: AppColors.topBackgroundDarkColor,
                expandedHeight: 200.h, // Height when expanded
                floating: true,
                pinned: true,
                flexibleSpace: const MainAppbar(),
                collapsedHeight: 50.h,
                toolbarHeight: 50.h,
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    if (index == 0) {
                      return SizedBox(
                        height: MediaQuery.of(context).size.height + 200,
                        child: TabBarView(
                          children: Constants.screens.map((screen) {
                            return ListTile(
                              title: screen,
                            );
                          }).toList(),
                        ),
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

What I have tried?

First: if I adjust the height of the SizedBox to (+ 337 height) pixel. it solves the issue. Like this: height: MediaQuery.of(context).size.height + 200 + 337,

But What if it is more than that?? How can I know the needed height?

I couldn't get the height of the widget because of it still building..

I tried more solutions like: Expanded(), Flexable().. but no effect..

I tried also to wrap that with SingleChildScrollView(), it scrolls now but I lost the callapsing of the SliverAppBar..

Please can someone help?

Answer 1

Since I don’t have the complete code, I used a method I typically rely on. I hope it helps.

Widget build(BuildContext context) {
return SafeArea(
  child: DefaultTabController(
    length: 9,
    child: Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              backgroundColor: Colors.black,
              expandedHeight: 200,
              floating: true,
              pinned: true,
              title: Text('blabla'),
              bottom: TabBar(
                isScrollable: true,
                tabs: List.generate(
                  9,
                  (index) => Tab(
                    text: 'Tab $index',
                  ),
                ),
              ),
              collapsedHeight: 50,
              toolbarHeight: 50,
            ),
          ];
        },
        body: TabBarView(
          children: List.generate(
            9,
            (index) => SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    height: MediaQuery.sizeOf(context).height,
                    color: Colors.primaries[index % Colors.primaries.length],
                    child: Center(
                      child: Text('Tab $index'),
                    ),
                  ),
                  Container(
                    height: MediaQuery.sizeOf(context).height,
                    color: Colors.primaries[index + 1 % Colors.primaries.length],
                    child: Center(
                      child: Text('Tab $index'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);}