Home > Net >  flutter - add pinned title to SliverList
flutter - add pinned title to SliverList

Time:10-21

how can I add title to SliverList, Im showing list of restaurants and I need to show title to this list such as Top Restaurants

          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) => Padding(
                padding:
                const EdgeInsets.only(left: 15.0, right: 15, bottom: 5),
                child: RestaurantWidget(restaurant: _con.topRestaurants[index]),
              ),
              childCount: _con.topRestaurants.length,
            ),
          ),

CodePudding user response:

try to add SliverPersistentHeader before your SliverList, reference to this article, Sliver:

This is in your page class:

...
          SliverPersistentHeader(
            pinned: true,
            floating: false,
            delegate: HeaderDelegate(backgroundColor, _title),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) => Padding(
                padding:
                const EdgeInsets.only(left: 15.0, right: 15, bottom: 5),
                child: RestaurantWidget(restaurant: _con.topRestaurants[index]),
              ),
              childCount: _con.topRestaurants.length,
            ),
          ),
...

Place this outside your page class:

class HeaderDelegate extends SliverPersistentHeaderDelegate {
  final Color backgroundColor;
  final String _title;

  Delegate(this.backgroundColor, this._title);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: backgroundColor,
      child: Center(
        child: Text(
          _title,
          style: TextStyle(
            color: Colors.white,
            fontSize: 25,
          ),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 80;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
  • Related