3

So basically I am using a NestedScrollView with a column body that holds a TabBar and TabBarView:

Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        physics: BouncingScrollPhysics(),
        headerSliverBuilder: (context, innerScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                stretch: true,
                pinned: true,
                collapsedHeight: 400,
                backgroundColor: Colors.red,
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  SizedBox(height: 20),
                  Biography(),
                  SizedBox(height: 20),
                ],
              ),
            ),
          ];
        },
        body: Column(
          children: [
            Container(
              child: TabBar(
                controller: this.controller,
                tabs: [
                  Tab(icon: Icon(CupertinoIcons.book)),
                  Tab(icon: Icon(CupertinoIcons.music_albums)),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: this.controller,
                children: [
                  // this is in reality a customscrollview
                  Container(color: Colors.red),
                  // this is in reality a customscrollview
                  Container(color: Colors.blue),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

The error:

When I scroll up, i.e my thumb is going toward the bottom of the screen, and the Container that is in the Column reaches the bottom of the screen, it causes an overflow error. The Expanded TabBarView is fine, it's the Container that causes the overflow.

What I've tried:

  1. I've tried to change the Column to a ListView as stated here but it results in another error(something about hasSize). I did set shrinkWrap: true.
  2. Use Expanded on the Container but it results in a wonky UI.
  3. Wrapping the Column in a SingleChildScrollView but it also results in the same error as ListView.

How can I make it so the Container doesn't cause an overflow when it reaches the bottom of the screen?

Thank you!

darkstar
  • 829
  • 11
  • 23
  • u can use list view method by wrapping Listview inside Sized box and specify size – Dipak Ramoliya Jan 22 '22 at 06:53
  • @DipakRamoliya The children of the TabBarView are CustomScrollViews so they don’t have a set size. I guess I shoulda specified that in the question – darkstar Jan 22 '22 at 07:17

0 Answers0