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 the screen as the user scrolls down a page.
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: ^ 4.0.0
Keep playing with the pre-built UI components.
GF Basic Flutter Sticky Header
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 headers 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
[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.
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.
| Name | Description |
|---|---|
| stickyContent | widget can be used to define [stickyContent] |
| content | widget 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] |
| callback | Allows to add custom stickyHeader stuck offset value |
| direction | [direction] allows children to align in vertical / horizontal way Defaults to [Axis.vertical] |
| stickyContentBuilder | builder 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.
getwidget
Please do appreciate our work through Github start
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 the experiment and implementation of Flutter. As well as after the 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. If you need assistance for your next app development project you can hire flutter developer from the GetWidget team