Flutter Sticky Header - A widget with a fixed header

Flutter Sticky Header Widget
Flutter Sticky Header Widget 

Flutter Sticky header is also called fixed header. It is a smart navigation tool by using which can fix the header to the top of the screen as the user scrolls down a page.

Rating System
Flutter Sticky Header Example

Flutter Sticky Header

Flutter Sticky Header Widget is a term used to describe a fixed navigation menu on a page that remains visible and in the same position as the user scrolls down and moves about a site. Sticky navigation examples, best practices, and demonstrations of how different sites and brands interpret this standard are plentiful across the mobile & web.

It is the fastest way to access the information for users which is making sticky header more demanding for user navigation.

Flutter Sticky Header With GFWidget

GFStickyHeader is a Flutter StickyHeader that has a fixed header at the top of the screen that has scrollable content when the user scrolls down if the content is more. It is useful in making the user interact with the app smoothly as the header has the main navigations in the header.

GFStickyHeader allows you to speed up your Flutter app development by 20-30%. It has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.

Now here is we are going to talk about what is GetWidget Sticky Header and how we implement this on Flutter app to build awesome Flutter Sticky Header for an app.

How to Get Started

Now here is the guide about how we should start developing GFStickyHeader Widget with the use of GetWidget UI Library.

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.4

Keep playing with the pre-built UI components.

GF Basic Flutter Sticky Header

Flutter Sticky Header example
Flutter Sticky Header example 

GetWidget StickyHeader can be customized accordingly wherein it should always be wrapped inside the ListView, GridView, CustomScrollView, SingleChildScrollView, or similar widgets.

The below example shows a basic GFSticky Header.

ListView.builder(
    itemCount: imageList.length,
    itemBuilder: (context, index) => GFStickyHeader(
          stickyContent: Container(
            child: Container(
              alignment: AlignmentDirectional.center,
              height: 50,
              width: MediaQuery.of(context).size.width,
              color: Color(0xFF42335d),
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                children: [
                  Text(
                    'Contact Group $index',
                    style: const TextStyle(color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
          content: Container(
            height: 300,
            child: ListView.builder(
                physics: ScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: 8,
                itemBuilder: (BuildContext context, int index) {
                  return SingleChildScrollView(
                    child: Column(
                      children: [
                        GFCheckboxListTile(
                          titleText: 'Eva Mendez',
                          subtitleText: 'Hello',
                          avatar: GFAvatar(
                            backgroundImage: 
                      AssetImage('asset image here),
                          ),
                          size: 25,
                          activebgColor: Colors.green,
                          activeIcon: Icon(
                            Icons.check,
                            size: 15,
                            color: Colors.white,
                          ),
                          type: GFCheckboxType.circle,
                          onChanged: (val) {
                            setState(() {
                              check = val;
                            });
                          },
                          value: check,
                          inactiveIcon: null,
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 20.0),
                          child: Divider(),
                        ),
                      ],
                    ),
                  );
                }),
          ),
        )),
Flutter Sticky Header Example Code Snippet

Flutter Sticky Header types

The Headers can be placed vertically or horizontally to the screen depending upon the requirement of the app and the user. Accordingly, we have the types of header and the following types are as follows.

GF Flutter Sticky Header - Vertical

GF Sticky Header property direction: Axis.vertical aligns the stickyContent and content in a vertical way.

GF Flutter Sticky Header - Horizontal

GF Sticky Header property direction: Axis.horizontal aligns the stickyContent and content in a horizontal way.

Flutter Sticky Header Builder

Flutter Sticky Header Builder
Flutter Sticky Header Builder 

[GFStickyHeaderBuilder] component works the same as GFStickyHeader, instead of widget for stickyHeader here we can use [builder]. This allows users to customize the stickyHeader with the render values.

We can use the below code for Flutter Sticky Header Builder Widget.

List imageList = ['asset images here'];

ListView.builder(
    itemCount: imageList.length,
    itemBuilder: (context, index) => GFStickyHeaderBuilder(
          direction: Axis.horizontal,
          stickyContentBuilder:
              (BuildContext context, double stuckValue) {
            stuckValue = 1.0 - stuckValue.clamp(0.0, 1.0);
            return Column(
              children: [
                Container(
                  height: 50,
                  width: MediaQuery.of(context).size.width * 0.5,
                  color: Color.lerp(Color(0xFF42335d).withOpacity(0.6),
                      Color(0xFF42335d), stuckValue),
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          'Product Name $index',
                          style: const TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  // height: 200,
                  width: MediaQuery.of(context).size.width * 0.5,
                  child: ListView.builder(
                      physics: ScrollPhysics(),
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: 1,
                      itemBuilder: (BuildContext context, int index) {
                        return SingleChildScrollView(
                          child: Container(
                            padding:
                                EdgeInsets.symmetric(horizontal: 15),
                            child: Column(
                              crossAxisAlignment:
                                  CrossAxisAlignment.start,
                              children: [
                                SizedBox(height: 15),
                                Row(
                                  children: [
                                    GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 1,
                                      groupValue: groupValue,
                                      onChanged: (val) {
                                        setState(() {
                                          groupValue = val;
                                        });
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor:
                                          GFColors.SUCCESS,
                                      custombgColor: GFColors.SUCCESS,
                                    ),
                                    SizedBox(width: 5),
                                    Text('Large')
                                  ],
                                ),
                                SizedBox(height: 8),
                                Row(
                                  children: [
                                    GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 2,
                                      groupValue: groupValue,
                                      onChanged: (val) {
                                        setState(() {
                                          groupValue = val;
                                        });
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor:
                                          GFColors.SUCCESS,
                                      custombgColor: GFColors.SUCCESS,
                                    ),
                                    SizedBox(width: 5),
                                    Text('Medium')
                                  ],
                                ),
                                SizedBox(height: 8),
                                Row(
                                  children: [
                                    GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 3,
                                      groupValue: groupValue,
                                      onChanged: (val) {
                                        setState(() {
                                          groupValue = val;
                                        });
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor:
                                          GFColors.SUCCESS,
                                      custombgColor: GFColors.SUCCESS,
                                    ),
                                    SizedBox(width: 5),
                                    Text('Small')
                                  ],
                                ),
                                 SizedBox(height: 8),
                                Row(
                                  children: [
                                    GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 3,
                                      groupValue: groupValue,
                                      onChanged: (val) {
                                        setState(() {
                                          groupValue = val;
                                        });
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor:
                                          GFColors.SUCCESS,
                                      custombgColor: GFColors.SUCCESS,
                                    ),
                                    SizedBox(width: 5),
                                    Text('Extra Small')
                                  ],
                                ),
                              ],
                            ),
                          ),
                        );
                      }),
                ),
              ],
            );
          },
          content: Container(
            height: 200,
            width: MediaQuery.of(context).size.width * 0.5,
            color: Colors.teal,
            child: Image.asset(imageList[index],
                fit: BoxFit.fill, width: 100, height: 200),
          ),
        )),
Flutter Sticky Header Builder Example Code Snippet

GF Flutter StickyHeader Custom Properties

The look and feel of the GFStickyHeader can be customized using the GFStickyHeader properties.

NameDescription
stickyContentwidget can be used to define [stickyContent]
contentwidget can be used to define [content].
enableHeaderOverlap

On state true, the [stickyContent] will overlap the [content].

Only works when direction is [Axis.vertical]. Default set to false.

stickyContentPosition

[GFPosition] allows to [stickyContentPosition] to stick at top in [Axis.vertical] and stick at start in [Axis.horizontal]

Defaults to [GFPosition.start]

callbackAllows to add custom stickyHeader stuck offset value
direction

[direction] allows children to align in vertical / horizontal way

Defaults to [Axis.vertical]

stickyContentBuilderbuilder widget can be used to define [stickyContentBuilder].

Here we discussed, what GFStickyHeader is? And how we can use it in our Flutter app through the GetWidget Sticky Header widget component.

What are the customizable properties used

The customizable properties include the stickyContent , content , enableHeaderOverlap , stickyContentPosition , callback , direction & stickyContentBuilder of Sticky Header component . Hence customizable properties are full flexible. You can check out all custom properties on GetWidget Sticky Header Widget Properties.

Can we set the position of stickyContent

Yes, we can set the position of stickyContent . By default, it is [GFPosition.start] ie, at the starting point of the screen.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum:

if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository:

Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

Conclusion:

Here we discuss, what Flutter StickyHeader Widget is? And how we can use and implement it into our Flutter app through the GetWidget StickyHeader component. Here, there are options to customize the StickyHeader widget.

About Our Team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that have been used by more than 500+ businesses around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community.