Flutter - Sticky header list

To divide the category of the items in the list view, we always need a sticky header. The sticky header shows header of group at the top of the list view when the user scrolls through the contents. The sticky header makes groups of children of the same type and also gives great UI.

The headers display at the top of the list content and help your application users keep track of which section they are currently in. The header may be one or more, it depends upon the type of the children items of the list view. If there is more than one header than the header will be replaced by another header when the user scrolls up all the items of the old header. 

In this post, we going to create a Flutter application to implement a sticky header in the list view. We’ll add a ListView as the body of our Home Scaffold and we provide a sticky header widget that takes headers and children. So, each header is associated with only the children on the list. We'll also set some text in the header to display the title and for the content, we'll use a Column widget to display children.

Creating a new project

1. Create a new Flutter project from File ⇒ New Flutter Project with your development IDE.

2. Add the plugin sticky_headers as a dependency in the pubspec.yaml file. Once you do that, you need to run flutter packages.
3. Now start editing main.dart class as you can see, we have implemented our theme and using StickyHeaderExample widget for the home.

                                                                                                                                                                    main.dart
import 'package:flutter/material.dart';
import 'package:flutterstickyheader/home_page.dart';

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

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Multipart upload',
      theme: ThemeData(
        primaryColor: const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFF167F67),
      ),
      home: StickyHeaderExample(),
    );
  }
}

4. After that create home_page.dart' class and write main part of this demo.

1. First create list of sources that will display in the list view. As you can see, we have created four list. The listItems contain items of header and children and androidChild, javaChild and flutterChild lists are children of headers as shown above.
   

     List<Items> listItems = List<Items>();
     List<String> androidChild = List<String>();
     List<String> javaChild = List<String>();
     List<String> flutterChild = List<String>();

   
   
2. To display header of list, we have created a method header that get header title by using index of list:
   

     Widget header(double stuckAmount, BuildContext context, int index) { }

   
   
3. To display children of header we have to create a list of widget that conatin same type children of header. So, to implement it we have created headerChild method:
   

   
    List<Widget> headerChild(List<String> child) {}

Here, you can see complete code snippet of home_page.dart class:

                                                                                                                                                          home_page.dart'
import 'package:flutter/material.dart';
import 'package:flutterstickyheader/items.dart';
import 'package:sticky_headers/sticky_headers.dart';

class StickyHeaderExample extends StatelessWidget {

  List<Items> listItems = List<Items>();
  List<String> androidChild = List<String>();
  List<String> javaChild = List<String>();
  List<String> flutterChild = List<String>();

  @override
  Widget build(BuildContext context) {
    createStickyHeaderList();

    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Sticky Header",
          style: TextStyle(color: Colors.white),
        ),
        elevation: 0.0,
      ),
      body: ListView.builder(
          itemCount: listItems.length,
          itemBuilder: (context, index) {
            return  StickyHeaderBuilder(
                builder: (BuildContext context, double stuckAmount) {
                  stuckAmount = 1.0 - stuckAmount.clamp(0.0, 1.0);
                  return header(stuckAmount,context,index);
                },
                content: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: headerChild(
                        listItems[index].childItems)
                )
            );
          }),
    );
  }

  List<Widget> headerChild(List<String> child) {
    var listWidget = List<Widget>();

    child.forEach((listData) {
      listWidget
          .add(Container(padding: EdgeInsets.all(10), child: Text(listData)));
    });

    return listWidget;
  }

  void createStickyHeaderList() {
    androidChild.add('Android Introduction');
    androidChild.add('Android Widgets');
    androidChild.add('Android Fragments');
    androidChild.add('Android Menu');
    androidChild.add('Android Service');
    androidChild.add('Android AlarmManager');
    androidChild.add('Android Storage');
    androidChild.add('Android SQLite');
    javaChild.add('History of Java');
    javaChild.add('Feature of Java');
    javaChild.add('Control Statements');
    javaChild.add('OOP');
    javaChild.add('Inheritance');
    javaChild.add('Abstract class');
    javaChild.add('Interface');
    javaChild.add('Collection Framework');
    flutterChild.add('Introduction');
    flutterChild.add('VerticalTab In Flutter');
    flutterChild.add('BottomSheet In Flutter');
    flutterChild.add('CheckboxListTitle using List in Flutter');
    flutterChild.add('Bloc Event Login And List Api Call (RestApi – Offline)');
    flutterChild.add('ListView Inside ListView In Flutter');
    flutterChild.add('DataTable In Flutter');
    flutterChild.add('Multiple Image Upload Using Multipart In Flutter');
    listItems.add(Items('Android', androidChild));
    listItems.add(Items('Java', javaChild));
    listItems.add(Items('Flutter', flutterChild));
  }

  Widget header(double stuckAmount, BuildContext context, int index) {
    return Container(
      height: 50.0,
      color: Color.lerp(Colors.black12, Colors.grey, stuckAmount),
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Text(
              listItems[index].headerTitle,
              style: const TextStyle(color: Colors.white),
            ),
          ),
          Offstage(
            offstage: stuckAmount <= 0.0,
            child: Opacity(
              opacity: stuckAmount,
              child: IconButton(
                icon: Icon(Icons.favorite, color: Colors.white),
                onPressed: () => Scaffold.of(context)
                    .showSnackBar(SnackBar(
                    content: Text('Header Clicked #$index'))),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

5. After that, create items.dart class. It contains header title and it's children:

class Items {
  String headerTitle;
  List<String> childItems;

  Items(String subjectName, List<String> topicNameList) {
    this.headerTitle = subjectName;
    this.childItems = topicNameList;
  }
}

If you have followed the above post carefully. You can see, your Flutter application running as shown above. But if you are facing any problem to implement it or you have any quires, please feel free to ask it from comment section below.