sliver_grouped_list

SliverGroupedList Widget

Build a beautiful sliver with a custom header, footer and body, which can be divided by groups with a header for each group and a list of entries.

Alt Text

Getting Started

  • Go inside pubspec.yaml file
  • Add this to your package's pubspec.yaml file:
dependencies:
     sliver_grouped_list: ^1.0.4
  • Run flutter pub get

How to use

Go to your widget .dart file and do import

import 'package:sliver_grouped_list/sliver_grouped_list.dart';

Inside your widget's Widget build(BuildContext context) method set as body the SliverGroupedList with explicitly showing the types of bodyHeader and bodyEntry.

// [Header] is the type of a group header
// [Entry] is the type of every entry in the list related to the group
body: SliverGroupedList<Header, Entry>()

Implement all required constructor parameters.

As a result the custom scroll view will contain the content of the passed data. Optionally you may add a RenderObjectWidget widget like SliverGrid or SliverList header section to the scroll view, and a footer as well.

Here is an example which is displayed in the GIF from above.

import 'package:flutter/material.dart';
import 'package:sliver_grouped_list/sliver_grouped_list.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  static const double _kHeight = 150.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: SliverGroupedList<String, String>(
        data: {
          'A': ['My best friend', 'Good friend of mine', 'Guy I do not know'],
          'B': ['My cat', 'My dog', 'My fish', 'My bird'],
          'C': ['My mom', 'My dad', 'My sis']
        },
        header: SliverGrid.count(
          crossAxisCount: 3,
          children: [
            Container(color: Colors.white, height: _kHeight),
            Container(color: Colors.black, height: _kHeight),
            Container(color: Colors.grey, height: _kHeight),
            Container(color: Colors.grey, height: _kHeight),
            Container(color: Colors.white, height: _kHeight),
            Container(color: Colors.black, height: _kHeight),
            Container(color: Colors.black, height: _kHeight),
            Container(color: Colors.grey, height: _kHeight),
            Container(color: Colors.white, height: _kHeight),
          ],
        ),
        bodyHeaderMinHeight: 60.0,
        bodyHeaderMaxHeight: 100.0,
        bodyHeaderPinned: true,
        bodyHeaderFloating: false,
        bodyHeaderBuilder: (_, header) => Container(
          alignment: Alignment.center,
          child: Text(
            header,
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.blue,
        ),
        bodyEntryBuilder: (_, item) => Card(
            color: Colors.lightBlueAccent,
            child: Container(
                height: _kHeight,
                alignment: Alignment.center,
                child: Text(
                  item,
                  style: TextStyle(color: Colors.white),
                ))),
        onItemTap: (item) => print(item),
        footer: SliverFixedExtentList(
          itemExtent: _kHeight,
          delegate: SliverChildListDelegate(
            [
              Container(color: Colors.black),
              Container(color: Colors.white),
              Container(color: Colors.grey),
              Container(color: Colors.black),
              Container(color: Colors.white),
              Container(color: Colors.grey),
            ],
          ),
        ),
      ),
    );
  }
}

Under MIT License

Libraries

sliver_grouped_list