How to Implement Sticky Header In Flutter ?

· 3 min read
How to Implement Sticky Header In Flutter
How to Implement Sticky Header In Flutter

When we need to displays a large amount of data on a mobile application screen we need to implement something like Sticky Header so that users can keep scrolling data and we will understand the purpose of data. So in this article, We will learn about How to Implement Sticky Header In Flutter?

How to Implement Sticky Header In Flutter?

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_sticky_header:

Now we need to import the package in our dart file like below:

import 'package:flutter_sticky_header/flutter_sticky_header.dart';

Now Implement it like below:

new SliverStickyHeader(
  header: new Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: new Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: new SliverList(
    delegate: new SliverChildBuilderDelegate(
      (context, i) => new ListTile(
            leading: new CircleAvatar(
              child: new Text('0'),
            ),
            title: new Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

We will get output like the below:

Sticky Header In Flutter
Sticky Header In Flutter

Users can also give a try to the below code.

new CustomScrollView(
    slivers: <Widget>[
        new SliverAppBar(
            title: new Text("Title"),
            snap: true,
            floating: true,
        ),
        new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return new Container(
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: new Text('list item $index'),
                    );
                },
            ),
        ),
    ],
)

Conclusion:

In this article, We have been through How to Implement Sticky Header In Flutter?

Thanks for being with us on a Flutter Journey.
Thanks for Reading !!! Keep Learning !!!

Hope you like our article. Do share your thoughts on the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply