StickyHeader In Flutter

StickyHeader In Flutter

In this flutter tutorial we will dicuss about StickyHeader In Flutter.The Sticky Header is used for Display the category wise you can set the Stick Header Widget that contains header and one child so each header associated with child on the list. we will return the StickyHeader as a output

in this flutter tutorial we set the height of the StickyHeader as Height 50.See the Screenshot,in screenshot java is a header which contains 8 containers as a child

Screenshot :

StickyHeader In Flutter

StickyHeader In Flutter

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'package:sticky_headers/sticky_headers.dart';

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

class ExampleApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sticky Headers Example',
      theme: new ThemeData(
      home: new StickyHeaderExample(),

class StickyHeaderExample extends StatelessWidget {
  List<Subject> subjectList = new List<Subject>();
  List<String> androidTopic = new List<String>();
  List<String> javaTopic = new List<String>();
  List<String> flutterTopic = new List<String>();
  Widget build(BuildContext context) {
    androidTopic.add('Android Introduction');
    androidTopic.add('Android Widgets');
    androidTopic.add('Android Fragments');
    androidTopic.add('Android Menu');
    androidTopic.add('Android Service');
    androidTopic.add('Android AlarmManager');
    androidTopic.add('Android Storage');
    androidTopic.add('Android SQLite');

    javaTopic.add('History of Java');
    javaTopic.add('Feature of Java');
    javaTopic.add('Control Statements');
    javaTopic.add('Abstract class');
    javaTopic.add('Collection Framework');

    flutterTopic.add('VerticalTab In Flutter');
    flutterTopic.add('BottomSheet In Flutter');
    flutterTopic.add('CheckboxListTitle using List in Flutter');
    flutterTopic.add('Bloc Event Login And List Api Call (RestApi – Offline)');
    flutterTopic.add('ListView Inside ListView In Flutter');
    flutterTopic.add('DataTable In Flutter');
    flutterTopic.add('Multiple Image Upload Using Multipart In Flutter');

    subjectList.add(Subject('Android', androidTopic));
    subjectList.add(Subject('Java', javaTopic));
    subjectList.add(Subject('Flutter', flutterTopic));

    return new ScaffoldWrapper(
      title: 'StickyHeader Flutter Tutorial',
      child: new ListView.builder(
          itemCount: subjectList.length,
          itemBuilder: (context, index) {
            return new Material(
              color: Colors.grey[300],
              child: new StickyHeaderBuilder(
                  builder: (BuildContext context, double stuckAmount) {
                    stuckAmount = 1.0 - stuckAmount.clamp(0.0, 1.0);
                    return new Container(
                      height: 50.0,
                          Color.lerp(Colors.black12, Colors.grey, stuckAmount),
                      padding: new EdgeInsets.symmetric(horizontal: 16.0),
                      alignment: Alignment.centerLeft,
                      child: new Row(
                        children: <Widget>[
                          new Expanded(
                            child: new Text(
                              style: const TextStyle(color: Colors.white),
                          new Offstage(
                            offstage: stuckAmount <= 0.0,
                            child: new Opacity(
                              opacity: stuckAmount,
                              child: new IconButton(
                                icon: new Icon(Icons.favorite,
                                    color: Colors.white),
                                onPressed: () => Scaffold.of(context)
                                    .showSnackBar(new SnackBar(
                                        content: new Text('Favorite #$index'))),
                  content: new Container(
                      child: Column(crossAxisAlignment: CrossAxisAlignment.start,
                          children: getContestsSubList(

  List<Widget> getContestsSubList(List<String> studentList) {
    var listWidget = List<Widget>();

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

    return listWidget;

class ScaffoldWrapper extends StatelessWidget {
  final Widget child;
  final String title;

  const ScaffoldWrapper({
    Key key,
    @required this.title,
    @required this.child,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new PreferredSize(
        preferredSize: new Size.fromHeight(kToolbarHeight),
        child: new Hero(
          tag: 'app_bar',
          child: new AppBar(
            title: new Text(title),
            elevation: 0.0,
      body: child,

class Subject {
  String subjectName;
  List<String> topicNameList;

  Subject(String subjectName, List<String> topicNameList) {
    this.subjectName = subjectName;
    this.topicNameList = topicNameList;

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit