How to use a non-sliver widget in a CustomScrollView

Question

I am trying to add a Text widget into CustomScrollView but I got issues like the target is not the same.

This is my widget:

@override
Widget build(BuildContext context) {
  final double statusBarHeight = MediaQuery.of(context).padding.top;
  return Scaffold(
      key: scaffoldKey,
      body: CustomScrollView(
        semanticChildCount: 2,
        slivers: <Widget>[
          _buildAppBar(context, statusBarHeight),
          Text('test')
        ],
      ));
}

The _buildAppBar method returns a SliverAppBar.

I need to use a Padding widget instead of the text, but I think that it will be like the same, that's the same issue.

score 30 · Answer 1 · answered Feb 24 '20 at 10:54

I found a better way to use non-slivers inside a CustomScrollView, use SliverToBoxAdapter widget. Give your non-sliver widget as child of SliverToBoxAdapter widget and your work done.

return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Stack(
          children: <Widget>[
            Container(
              height: 200,
              width: 200,
              color: Colors.green,
            ),
            Positioned(
              child: Container(color: Colors.yellow),
              top: 50,
              left: 50,
            )
          ],
        ),
      )
    ],
  ),
);

score 4 · Answer 2 · answered May 08 '19 at 06:45

4

The best answer is not correct, it causes assertion padding == null. @blaneyneil wrote the right solution: use to SliverToBoxAdapter.

answered May 08 '19 at 06:45

Dmitriy Blokhin

574
1
6
14

score -6 · Accepted Answer · answered Feb 05 '19 at 19:30

Once you are working with slivers, you need to use a sliver child wrapping your other non-sliver widgets. Since you want to use Padding, you can actually take advantage of the SliverPadding widget, which accepts your Text as its child.

So, instead of having Text('test') as you have, replace it by SliverPadding(child: Text('test)) instead.

There are a few sliver widgets that you may want to be aware of. Take a look here at Collin Jackson's accepted answer and also at Slivers, Demystified article for better understanding.

There is no such field `child` in `SliverPadding`. It can only be used to wrap another sliver. Use `SliverToBoxAdapter` instead. — Panduka Nandara, Apr 26 '20 at 18:19

How to use a non-sliver widget in a CustomScrollView

3 Answers3