Flutter Sticky Header - A widget with a fixed header.

Flutter Sticky Header - A widget with a fixed header.

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 screen as the user scrolls down a page.

Rating System

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 .

GetWidget Sticky Header:

It allows 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.

GetWidget Sticky Header , we can customize its every section according to us.

Basic GF Sticky Header:

Always wrap GFSticky Header inside [ListView], [GridView], [CustomScrollView], [SingleChildScrollView] or similar .

We can use the below code for 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 types:

GF Sticky Header - Vertical

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

GF Sticky Header - Horizontal

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

GF Sticky Header Builder:

[GFStickyHeaderBuilder] component works same as GFStickyHeader, instead of widget for stickyHeader here we can use [builder]. This allows user to customize the stickyHeader with 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),
          ),
        )),

How to Start:

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: ^1.2.4

Keep playing with the pre-built UI components.

Conclusion:

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

FAQ's:

Q. What are the customizable properties used?

Ans. 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.

Q. Can we set the position of stickyContent  ?

Ans: Yes, we can set the position of stickyContent . By default it is [GFPosition.start]