Flutter Center Widget in CustomScrollView

Question

How do I center an element in custom child scrollview silverlist?

return CustomScrollView(
  physics: BouncingScrollPhysics(),
  slivers: [
    SliverList(
        delegate: SliverChildListDelegate([
      SizedBox(height: widget.height),

      HeaderTitle("Hello there"),
      (data.length == 0)
          ? Center(
              child: Container(
                // padding: EdgeInsets.fromLTRB(0, 150, 0, 0),
                child: Column(
                  children: [
                    Text("No Data Yet"),
                    OutlineButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      textColor: Colors.black,
                      child: Text("Do Something"),
                    ),
                  ],
                ),
              ),
            )
          : Container()
    ])),
  
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        childAspectRatio: 10.0 / 10.0,
        crossAxisCount: 2,
      ),
      delegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return CastCard(data[index], null);
      }, childCount: data.length),
    ),
  ],
);

I have tried to wrap with Center and Column with center property but the text No Date yet is not positioned in the cetner of the screen (with the remaining space available)

user_1230312 · Answer

You could use the SliverToBoxAdapter to put a custom widget in CustomScrollView and then put a Center widget in it. For Example :

class MenuView extends StatelessWidget {

  double _kMaxCrossAxisExtent = 100;
  double _kMainAxisSpacing=10;
  double _kChildAspectRatio = 1;
  double _kCrossAxisSpacing = 10;
  final double _kSliverPadding = 8;
  double _kExpandedHeight = 250;
  double _kCollapsedHeight =250;


  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          expandedHeight: _kExpandedHeight,
          collapsedHeight: _kCollapsedHeight,
          flexibleSpace: Placeholder(
            fallbackHeight: 800,
          ),
          elevation: 10,
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: null,
            )
          ],
        ),
        SliverToBoxAdapter(
          child:Center(child:Padding(
            padding: const EdgeInsets.symmetric(vertical: 80),
            child: Text('This is a centered Text'),
          ))
        ),
        SliverPadding(
          padding: /*const*/ EdgeInsets.all(_kSliverPadding),
          sliver: SliverGrid.extent(
            maxCrossAxisExtent: _kMaxCrossAxisExtent,
            mainAxisSpacing: _kMainAxisSpacing,
            crossAxisSpacing: _kCrossAxisSpacing,
            childAspectRatio: _kChildAspectRatio,
            children: [
              for (int i = 0; i <= 10; i++)
                Placeholder(
                  fallbackWidth: 200,
                  fallbackHeight: 200,
                )
            ],
          ),
        ),
      ],
    );
  }
}

Which creates the following result :

Or you can use the SliverFillRemaining to fill the remaining space of the CustomScrollView , like this :

class MenuView extends StatelessWidget {

  double _kMaxCrossAxisExtent = 100;
  double _kMainAxisSpacing=10;
  double _kChildAspectRatio = 1;
  double _kCrossAxisSpacing = 10;
  final double _kSliverPadding = 8;
  double _kExpandedHeight = 250;
  double _kCollapsedHeight =250;


  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(), //The bouncing could be removed
      slivers: [
        SliverAppBar(
          expandedHeight: _kExpandedHeight,
          collapsedHeight: _kCollapsedHeight,
          flexibleSpace: Placeholder(
            fallbackHeight: 800,
          ),
          elevation: 10,
          actions: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: null,
            )
          ],
        ),
        SliverFillRemaining(
          child:Center(child:Padding(
            padding: const EdgeInsets.symmetric(vertical: 80),
            child: Text('This is a centered Text'),
          ))
        ),

      ],
    );
  }
}

The result is (with a little awesome bouncing which could be removed) :

user_11450504 · Answer

You can use the SliverFillRemaining widget inside your CustomScrollView and set its property hasScrollBody to false value.

SliverFillRemaining(
  hasScrollBody: false,
  child: Center(
    child: Text(
    "Some Dummy Text",
    ),
  ),
)

Flutter Center Widget in CustomScrollView

2 Answers