Flutter adding NestedScrollView into SliverChildListDelegate and getting RenderFlex error

Question

in my application i have a CustomScrollView which with that i can have a auto Hide AppBar

UPDATE SAMPLE CODE ADDED

CustomScrollView(
  controller: _scrollController,
  physics: const ClampingScrollPhysics(),
  slivers: <Widget>[
    SliverFeedsList(),
  ],
);

inside SliverFeedsList i want to have another SliverList and SliverPersistentHeader.

when i'm adding them i get this error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.
    
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children 
(using Flexible rather than Expanded). 
This will allow the flexible children to size themselves to 
less than the infinite remaining space they would otherwise be forced to take, 
and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

SliverFeedsList partial content:

Column(
  children: [
    Expanded(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                return Column(
                  children: <Widget>[
                    Container(
                      color: Colors.pink,
                      height: 50.0,
                    ),
                    Container(
                      color: Colors.yellow,
                      height: 50.0,
                    )
                  ],
                );
              }, childCount: 1),
            ),
            SliverPersistentHeader(
              pinned: true,
              floating: true,
              delegate: CustomTabHeader(
                  Container(
                    color: Colors.pink,
                    height: 50.0,
                  )
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 10,
          padding: const EdgeInsets.only(top: 8),
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return Container(height: 36.0, child: Text('aaa'));
          },
        ),
      ),
    ),
  ],
)

sample code for text and troubleshooting that

void main() => runApp(NestedSliverContainer());

class NestedSliverContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Nested Sliver',
      home: MyNestedSliverContainerApp(),
    );
  }
}

class MyNestedSliverContainerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          physics: const ClampingScrollPhysics(),
          slivers: <Widget>[
            SliverPadding(
              padding: const EdgeInsets.all(0),
              sliver: SliverList(
                delegate: SliverChildListDelegate([
                  Column(
                    children: [
                      Expanded(
                        child: NestedScrollView(
                          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                            return <Widget>[
                              SliverList(
                                delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                                  return Column(
                                    children: <Widget>[
                                      Container(
                                        color: Colors.pink,
                                        height: 50.0,
                                      ),
                                      Container(
                                        color: Colors.yellow,
                                        height: 50.0,
                                      )
                                    ],
                                  );
                                }, childCount: 1),
                              ),
                              SliverPersistentHeader(
                                pinned: true,
                                floating: true,
                                delegate: CustomTabHeader(Container(
                                  color: Colors.pink,
                                  height: 50.0,
                                )),
                              ),
                            ];
                          },
                          body: ListView.builder(
                            itemCount: 10,
                            padding: const EdgeInsets.only(top: 8),
                            scrollDirection: Axis.vertical,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(height: 36.0, child: Text('test'));
                            },
                          ),
                        ),
                      ),
                    ],
                  )
                ]),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class CustomTabHeader extends SliverPersistentHeaderDelegate {
  CustomTabHeader(
    this.searchUI,
  );

  final Widget searchUI;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return searchUI;
  }

  @override
  double get maxExtent => 52.0;

  @override
  double get minExtent => 52.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

Answer 1

I guess, it doesn't need to be nested . Keep it flat.

import 'package:flutter/material.dart';

void main() => runApp(NestedSliverContainer());

class NestedSliverContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Nested Sliver',
      home: MyNestedSliverContainerApp(),
    );
  }
}

class MyNestedSliverContainerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverList(
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Column(
                    children: <Widget>[
                      Container(
                        color: Colors.pink,
                        height: 50.0,
                      ),
                      Container(
                        color: Colors.yellow,
                        height: 50.0,
                      )
                    ],
                  );
                }, childCount: 1),
              ),
              SliverPersistentHeader(
                pinned: true,
                floating: true,
                delegate: CustomTabHeader(Container(
                  color: Colors.pink,
                  height: 50.0,
                )),
              ),
            ];
          },
          body: ListView.builder(
            itemCount: 10,
            padding: const EdgeInsets.only(top: 8),
            scrollDirection: Axis.vertical,
            itemBuilder: (BuildContext context, int index) {
              return Container(height: 36.0, child: Text('test'));
            },
          ),
        ),
      ),
    );
  }
}

class CustomTabHeader extends SliverPersistentHeaderDelegate {
  CustomTabHeader(
    this.searchUI,
  );

  final Widget searchUI;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return searchUI;
  }

  @override
  double get maxExtent => 52.0;

  @override
  double get minExtent => 52.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}