# GF Sticky Header

# GF Sticky Header Info

# Usage

The simple code of a basic GFSticky Header is as shown below.

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(),
                        ),
                      ],
                    ),
                  );
                }),
          ),
        )),

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

# GF 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.

The basic example GFSticky Header Builder is as shown below.

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),
          ),
        )),

# Custom Properties

Look and feel of the GFStickyHeader can be customized using the GFStickyHeader properties.

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].
Last Updated: 10/23/2020, 4:54:08 PM