Flutter SliverAppBar clip flexibleSpace widget on scroll

Question

I am making an app that pushes a flexibleSpace widget in a SliverAppBar when the user starts scrolling but I'm running into some issues. The flexibleSpace overflows into the list due to using the OverflowBox widget, which helps to archive the effect I want.

Code:

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              leading: const SizedBox(),
              expandedHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
              floating: true,
              pinned: true,
              surfaceTintColor: Colors.transparent,
              flexibleSpace: OverflowBox(
                maxHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
                fit: OverflowBoxFit.deferToChild,
                child: AutoLayout(
                  padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 43 + 16),
                  verticalGap: 16,
                  children: [
                    const Text("Featured"),
                    Container(
                      height: 117,
                      width: double.infinity,
                      decoration: ShapeDecoration(
                        color: Colors.blue[300],
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(16),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              bottom: const SelectionTray(
                height: 43,
                tabs: ["TAB", "TAB", "TAB", "TAB", "TAB", "TAB"],
              ),
            ),
          ];
        },
        body: ListView.builder(
          padding: const EdgeInsets.only(top: 16),
          itemCount: 12,
          itemBuilder: (context, index) {
            return Container(
              height: 76,
              padding: const EdgeInsets.all(12),
              margin: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 8.0),
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(16),
              ),
            );
          },
        ),
      ),
    );
  }

Result:

What can I do to achieve the same effect without having the overflow?

Answer 1

Try wrapping your OverflowBox with a LayoutBuilder. The LayoutBuilder widget can provide the constraints from its parent to its child, which can help to control the overflow.

SliverAppBar(
  leading: const SizedBox(),
  expandedHeight: 117 + 43 + 16 + 20 + 16, // will be calculated from variables
  floating: true,
  pinned: true,
  surfaceTintColor: Colors.transparent,
  flexibleSpace: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return OverflowBox(
        maxHeight: constraints.maxHeight,
        fit: OverflowBoxFit.deferToChild,
        child: AutoLayout(
          padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 43 + 16),
          verticalGap: 16,
          children: [
            const Text("Featured"),
            Container(
              height: 117,
              width: double.infinity,
              decoration: ShapeDecoration(
                color: Colors.blue[300],
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
          ],
        ),
      );
    },
  ),
  bottom: const SelectionTray(
    height: 43,
    tabs: ["TAB", "TAB", "TAB", "TAB", "TAB", "TAB"],
  ),
),

In this code, the LayoutBuilder provides the constraints of the SliverAppBar to the OverflowBox, which helps to prevent the overflow.