{"id":7375,"date":"2020-12-31T07:05:29","date_gmt":"2020-12-31T07:05:29","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-sticky-header\/"},"modified":"2024-11-21T11:21:29","modified_gmt":"2024-11-21T11:21:29","slug":"flutter-sticky-header","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-sticky-header\/","title":{"rendered":"Flutter Sticky Header – A widget with a fixed header"},"content":{"rendered":"

Flutter Sticky header<\/strong><\/a> <\/em>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.<\/p>\n

Flutter Sticky Header<\/h3>\n

Flutter Sticky Header Widget<\/strong> <\/em>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.<\/p>\n

It is the fastest way to access the information for users which is making sticky header more demanding for user navigation. <\/p>\n

Flutter Sticky Header With GFWidget<\/h3>\n

GFStickyHeader<\/strong> is a Flutter StickyHeader<\/strong> 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.<\/p>\n

GFStickyHeader<\/strong> allows you to speed up your Flutter app development<\/a> by 20-30%. It has almost all widget<\/a> that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.<\/p>\n

Now here is we are going to talk about what is GetWidget<\/strong> Sticky Header and how we implement this on Flutter app to build awesome Flutter Sticky Header for an app.<\/em><\/p><\/blockquote>\n

How to Get Started<\/h3>\n

Now here is the guide about how we should start developing GFStickyHeader <\/strong>Widget with the use of GetWidget<\/strong> UI Library.<\/p>\n

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

Install Package from pub.dev :<\/em><\/p><\/blockquote>\n

https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n

Import full package:<\/h3>\n

import ‘package:getwidget\/getwidget.dart’;<\/p>\n

Note: dependencies: getwidget: ^ 4.0.0<\/strong><\/p>\n

Keep playing with the pre-built UI components.\u200c<\/em><\/p><\/blockquote>\n

GF Basic Flutter Sticky Header<\/h3>\n

GetWidget StickyHeader<\/strong> can be customized accordingly wherein it should always be wrapped inside the ListView, GridView, CustomScrollView, SingleChildScrollView, or similar widgets.<\/p>\n

The below example shows a basic GFSticky Header<\/strong>.<\/p>\n

\n
ListView.builder(\n    itemCount: imageList.length,\n    itemBuilder: (context, index) => GFStickyHeader(\n          stickyContent: Container(\n            child: Container(\n              alignment: AlignmentDirectional.center,\n              height: 50,\n              width: MediaQuery.of(context).size.width,\n              color: Color(0xFF42335d),\n              padding: EdgeInsets.symmetric(horizontal: 16.0),\n              child: Row(\n                children: [\n                  Text(\n                    'Contact Group $index',\n                    style: const TextStyle(color: Colors.white),\n                  ),\n                ],\n              ),\n            ),\n          ),\n          content: Container(\n            height: 300,\n            child: ListView.builder(\n                physics: ScrollPhysics(),\n                shrinkWrap: true,\n                scrollDirection: Axis.vertical,\n                itemCount: 8,\n                itemBuilder: (BuildContext context, int index) {\n                  return SingleChildScrollView(\n                    child: Column(\n                      children: [\n                        GFCheckboxListTile(\n                          titleText: 'Eva Mendez',\n                          subtitleText: 'Hello',\n                          avatar: GFAvatar(\n                            backgroundImage: \n                      AssetImage('asset image here),\n                          ),\n                          size: 25,\n                          activebgColor: Colors.green,\n                          activeIcon: Icon(\n                            Icons.check,\n                            size: 15,\n                            color: Colors.white,\n                          ),\n                          type: GFCheckboxType.circle,\n                          onChanged: (val) {\n                            setState(() {\n                              check = val;\n                            });\n                          },\n                          value: check,\n                          inactiveIcon: null,\n                        ),\n                        Padding(\n                          padding: const EdgeInsets.symmetric(\n                              horizontal: 20.0),\n                          child: Divider(),\n                        ),\n                      ],\n                    ),\n                  );\n                }),\n          ),\n        )),<\/code><\/pre>
\n
Flutter Sticky Header Example Code Snippet<\/span><\/p>\n<\/figcaption><\/figure>\n
Flutter Sticky Header types<\/h3>\n
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 headers and the following types are as follows.<\/p>\n
GF Flutter Sticky Header – Vertical<\/h3>\n
GF Sticky Header property direction: Axis.vertical<\/code> <\/em>aligns the <\/em>stickyContent<\/strong> <\/em>and <\/em>content in a vertical way.<\/em><\/p>\n
GF Flutter Sticky Header – Horizontal<\/h3>\n
GF Sticky Header property direction: Axis.horizontal<\/code> <\/em>aligns <\/em>the stickyContent<\/strong> and content in a horizontal way.<\/p>\n
Flutter Sticky Header Builder<\/h3>\n
[GFStickyHeaderBuilder] component works the same as GFStickyHeader, instead of widget for stickyHeader here we can use [builder]. This allows users to customize the sticky header with the render values.<\/p>\n
We can use the below code for Flutter Sticky Header Builder Widget<\/strong>.<\/p>\n
\n
List imageList = ['asset images here'];\n\nListView.builder(\n    itemCount: imageList.length,\n    itemBuilder: (context, index) => GFStickyHeaderBuilder(\n          direction: Axis.horizontal,\n          stickyContentBuilder:\n              (BuildContext context, double stuckValue) {\n            stuckValue = 1.0 - stuckValue.clamp(0.0, 1.0);\n            return Column(\n              children: [\n                Container(\n                  height: 50,\n                  width: MediaQuery.of(context).size.width * 0.5,\n                  color: Color.lerp(Color(0xFF42335d).withOpacity(0.6),\n                      Color(0xFF42335d), stuckValue),\n                  padding: const EdgeInsets.symmetric(horizontal: 16),\n                  alignment: Alignment.centerLeft,\n                  child: Row(\n                    children: [\n                      Expanded(\n                        child: Text(\n                          'Product Name $index',\n                          style: const TextStyle(color: Colors.white),\n                        ),\n                      ),\n                    ],\n                  ),\n                ),\n                Container(\n                  \/\/ height: 200,\n                  width: MediaQuery.of(context).size.width * 0.5,\n                  child: ListView.builder(\n                      physics: ScrollPhysics(),\n                      shrinkWrap: true,\n                      scrollDirection: Axis.vertical,\n                      itemCount: 1,\n                      itemBuilder: (BuildContext context, int index) {\n                        return SingleChildScrollView(\n                          child: Container(\n                            padding:\n                                EdgeInsets.symmetric(horizontal: 15),\n                            child: Column(\n                              crossAxisAlignment:\n                                  CrossAxisAlignment.start,\n                              children: [\n                                SizedBox(height: 15),\n                                Row(\n                                  children: [\n                                    GFRadio(\n                                      type: GFRadioType.blunt,\n                                      size: 23,\n                                      value: 1,\n                                      groupValue: groupValue,\n                                      onChanged: (val) {\n                                        setState(() {\n                                          groupValue = val;\n                                        });\n                                      },\n                                      inactiveIcon: null,\n                                      activeBorderColor:\n                                          GFColors.SUCCESS,\n                                      custombgColor: GFColors.SUCCESS,\n                                    ),\n                                    SizedBox(width: 5),\n                                    Text('Large')\n                                  ],\n                                ),\n                                SizedBox(height: 8),\n                                Row(\n                                  children: [\n                                    GFRadio(\n                                      type: GFRadioType.blunt,\n                                      size: 23,\n                                      value: 2,\n                                      groupValue: groupValue,\n                                      onChanged: (val) {\n                                        setState(() {\n                                          groupValue = val;\n                                        });\n                                      },\n                                      inactiveIcon: null,\n                                      activeBorderColor:\n                                          GFColors.SUCCESS,\n                                      custombgColor: GFColors.SUCCESS,\n                                    ),\n                                    SizedBox(width: 5),\n                                    Text('Medium')\n                                  ],\n                                ),\n                                SizedBox(height: 8),\n                                Row(\n                                  children: [\n                                    GFRadio(\n                                      type: GFRadioType.blunt,\n                                      size: 23,\n                                      value: 3,\n                                      groupValue: groupValue,\n                                      onChanged: (val) {\n                                        setState(() {\n                                          groupValue = val;\n                                        });\n                                      },\n                                      inactiveIcon: null,\n                                      activeBorderColor:\n                                          GFColors.SUCCESS,\n                                      custombgColor: GFColors.SUCCESS,\n                                    ),\n                                    SizedBox(width: 5),\n                                    Text('Small')\n                                  ],\n                                ),\n                                 SizedBox(height: 8),\n                                Row(\n                                  children: [\n                                    GFRadio(\n                                      type: GFRadioType.blunt,\n                                      size: 23,\n                                      value: 3,\n                                      groupValue: groupValue,\n                                      onChanged: (val) {\n                                        setState(() {\n                                          groupValue = val;\n                                        });\n                                      },\n                                      inactiveIcon: null,\n                                      activeBorderColor:\n                                          GFColors.SUCCESS,\n                                      custombgColor: GFColors.SUCCESS,\n                                    ),\n                                    SizedBox(width: 5),\n                                    Text('Extra Small')\n                                  ],\n                                ),\n                              ],\n                            ),\n                          ),\n                        );\n                      }),\n                ),\n              ],\n            );\n          },\n          content: Container(\n            height: 200,\n            width: MediaQuery.of(context).size.width * 0.5,\n            color: Colors.teal,\n            child: Image.asset(imageList[index],\n                fit: BoxFit.fill, width: 100, height: 200),\n          ),\n        )),<\/code><\/pre>
\n
Flutter Sticky Header Builder Example Code Snippet<\/span><\/p>\n<\/figcaption><\/figure>\n
<\/h3>\n
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n