First off, huge thanks for this plugin. Big big help!

Tiny bug: When scrolling there is a 1px line above the header. See here: https://share.icloud.com/photos/00iofG5V2K9aKDL6Mb2gZ8uKg

demostration: https://share.icloud.com/photos/0O38S_lN4_3i1TAmXjyu22QiQ

Here is the code:

Expanded(
                child: ListView.builder(
                  itemCount: 1,
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      children: <Widget>[
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            ByCategory(category: 'WORLD'),
                            SizedBox(
                              height: grid1,
                            ),
                            WorldRow1(),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                WorldRow3(
                                  statusColor: themeOrange,
                                  title: 'ACTIVE',
                                ),
                                SizedBox(
                                  width: grid2,
                                ),
                                WorldRow3(
                                  statusColor: themeRed,
                                  title: 'DIED',
                                ),
                                SizedBox(
                                  width: grid2,
                                ),
                                WorldRow3(
                                  statusColor: themeGreen,
                                  title: 'RECOVERED',
                                ),
                              ],
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: grid7),
                          child: StickyHeader(
                            header: Container(
                              padding: EdgeInsets.only(top: 88.0),
                              decoration: BoxDecoration(
                                color: themeBackgroundColor,
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(grid2),
                                  bottomRight: Radius.circular(grid2),
                                ),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  ByCategory(category: 'BY COUNTRY'),
                                  SizedBox(
                                    height: grid1,
                                  ),
                                  CountriesTableHeader(),
                                ],
                              ),
                            ),
                            content: Column(
                              children: <Widget>[
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                                CountryRow(),
                              ],
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),

Is there a way to have more than one content for one StickyHeader?

As of right now, I can only manage to get one ListTile widget underneath a StickyHeader widget. But I want to make a single ListView with two StickyHeader widgets and five ListTile widgets underneath each StickyHeader widget -- is that possible?

Thank you in advance @slightfoot for any help you can provide!

Headers don't get stick to top when I try to disappear keyboard . it does not work as it should do. sticky header overlaps its own content . when I scroll little bit then it goes to its place on top as you can see in uploaded Gif.

Hi,

Our team is using this package and is works really well, thank you.

To continue using it we need this package to be upgraded to null stafety: https://dart.dev/null-safety/migration-guide

Please let us know if this is planned for this package.

NoSuchMethodError (NoSuchMethodError: The method '-' was called on null. Receiver: null

Intro

Hi, my team is facing an exception when building a list of StickyHeader. The exception does not affect the user but is polluting our crashlytics.

Images

To reproduce:

• Clone https://github.com/fluttercommunity/flutter_sticky_headers
• Run the example
• Turn on All Breakpoints and Uncaught Exceptions.
• Navigate to any example

Additional Information

• Flutter Doctor:

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.6 19G2021, locale pt-BR)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.7)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.48.2)
[✓] Connected device (2 available) 

Sticky Header Not Stick on Top

Images

Step To Reproduce

1. ListView Builder with Sticky Header
2. At the end of content put form
3. Scroll down to form and tap/focus on any input box keyboard will show.
4. After the keyboard opens just close using the android navigation return key.
5. Sticky header will show in the middle of the screen.

My Sample Code

ListView.builder(
                  itemCount: 1,
                  controller: _scrollController,
                  physics: BouncingScrollPhysics(),
                  itemBuilder: (context, index) {
                    return StickyHeader(
                      overlapHeaders: true,
                      header: Material(
                        color: AppColors.White,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.zero,
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(10),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.comment,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.5),
                                onTap: () {
                                  setState(() {
                                    _shareYourThoughts = true;
                                  });
                                  var scrollPosition = _scrollController.position;
                                  if (scrollPosition.viewportDimension < scrollPosition.maxScrollExtent) {
                                    _scrollController.animateTo(
                                      scrollPosition.maxScrollExtent,
                                      duration: new Duration(milliseconds: 200),
                                      curve: Curves.easeOut,
                                    );
                                  }
                                },
                              ),
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.email,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.2),
                                onTap: () {},
                              ),
                              InkWell(
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Icon(
                                    Icons.file_download,
                                    color: AppColors.Red,
                                  ),
                                ),
                                splashColor: AppColors.Red.withOpacity(0.2),
                                onTap: () async {
                                  var status = await Permission.storage.status;
                                  if (status.isGranted) {
                                    var listDirectories = await _requestExternalStorageDirectory();
                                    if (listDirectories != null) {
                                      _applicationDocumentDirectory = listDirectories[0];
                                    }
                                    if (_applicationDocumentDirectory != null) {
                                      Directory appDownload = Directory(_applicationDocumentDirectory.path);
                                      taskId = await FlutterDownloader.enqueue(
                                        url: postDownloadUrl,
                                        savedDir: appDownload.path,
                                        showNotification: true, // show download progress in status bar (for Android)
                                        openFileFromNotification: true, // click on notification to open downloaded file (for Android)
                                      );
                                    }
                                  }
                                },
                              )
                            ],
                          ),
                        ),
                      ),
                      content: Padding(
                        padding: EdgeInsets.all(20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            CategoryButton(
                              category: postCategory,
                              categoryId: state.post.catId,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 10, bottom: 10),
                              child: Text(
                                postTitle,
                                style: TextStyle(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.bold,
                                  letterSpacing: 0.1,
                                  shadows: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: 24,
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(bottom: 10),
                              child: Text(
                                DateFormat.yMMMMd().format(DateTime.parse(postDate)),
                                style: TextStyle(
                                  color: AppColors.Grey,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.normal,
                                  letterSpacing: 0.1,
                                  shadows: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: 18,
                                ),
                              ),
                            ),
                            Html(
                              data: postContent,
                              onLinkTap: AppNavigation.launchUrl,
                              style: {
                                "p": Style(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.all(0),
                                ),
                                "a": Style(
                                  textDecoration: TextDecoration.none,
                                  color: AppColors.Red,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.all(0),
                                ),
                                "li": Style(
                                  color: AppColors.Black,
                                  fontFamily: AppFonts.Font_Family,
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.1,
                                  textShadow: [
                                    Shadow(
                                      blurRadius: 0.1,
                                    )
                                  ],
                                  fontSize: FontSize(18),
                                  padding: EdgeInsets.only(
                                    top: 5,
                                    bottom: 2.5,
                                  ),
                                ),
                              },
                            ),
                            InkWell(
                              splashColor: AppColors.Red.withOpacity(0.2),
                              onTap: () {
                                setState(() {
                                  _shareYourThoughts = true;
                                });
                              },
                              child: Padding(
                                padding: const EdgeInsets.only(top: 10, bottom: 10),
                                child: Text(
                                  "Share your thoughts",
                                  style: TextStyle(
                                    color: AppColors.Red,
                                    fontFamily: AppFonts.Font_Family,
                                    fontWeight: FontWeight.normal,
                                    letterSpacing: 0.1,
                                    shadows: [
                                      Shadow(
                                        blurRadius: 0.1,
                                      )
                                    ],
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                            if (_shareYourThoughts)
                              Form(
                                key: _formKey,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    InputBox(
                                      inputType: TextInputType.name,
                                      labelText: "Name",
                                      currentFocusNode: _nameFocus,
                                      nextFocusNode: _emailFocus,
                                      validator: (value) {
                                        if (value.isEmpty) {
                                          return 'Please enter name';
                                        }
                                        return null;
                                      },
                                    ),
                                    InputBox(
                                        inputType: TextInputType.emailAddress,
                                        labelText: "Email",
                                        currentFocusNode: _emailFocus,
                                        nextFocusNode: _websiteFocus,
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return 'Please enter email';
                                          }
                                          return null;
                                        }),
                                    InputBox(
                                        inputType: TextInputType.url,
                                        labelText: "Website",
                                        currentFocusNode: _websiteFocus,
                                        nextFocusNode: _commentFocus,
                                        validator: (value) {
                                          if (value.isEmpty) {
                                            return 'Please enter website url';
                                          }
                                          return null;
                                        }),
                                    InputBox(
                                      inputType: TextInputType.multiline,
                                      labelText: "Comment",
                                      currentFocusNode: _commentFocus,
                                      isLastFocus: true,
                                      validator: (value) {
                                        if (value.isEmpty) {
                                          return 'Please enter comment';
                                        }
                                        return null;
                                      },
                                      maxLength: 200,
                                    ),
                                    RaisedButton(
                                      onPressed: () {
                                        if (_formKey.currentState.validate()) {
                                          // If the form is valid, display a Snackbar.
                                          Scaffold.of(context).showSnackBar(SnackBar(content: Text('Processing Data')));
                                        }
                                      },
                                      child: Text(
                                        "Submit",
                                        style: TextStyle(
                                          fontFamily: AppFonts.Font_Family,
                                          fontWeight: FontWeight.normal,
                                          letterSpacing: 0.1,
                                          shadows: [
                                            Shadow(
                                              blurRadius: 0.1,
                                            )
                                          ],
                                          fontSize: 18,
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                          ],
                        ),
                      ),
                    );
                  },
                );

When using this library along with infinite_listview, some headers of the negative indexes get flicky. It happens until the index 0 is visible, then it stops.

You should be able to see some blank spaces between some headers and the AppBar:

The code used in the example above:

import 'package:flutter/material.dart';
import 'package:infinite_listview/infinite_listview.dart';
import 'package:sticky_headers/sticky_headers.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
      theme: ThemeData(primarySwatch: Colors.blueGrey),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: InfiniteListView.builder(
        itemBuilder: (_, int index) {
          return StickyHeader(
            header: header(context),
            content: ListTile(
              title: Text('Item #$index'),
              subtitle: Text('Description'),
            ),
          );
        },
      ),
    );
  }

  Container header(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      width: double.infinity,
      color: Colors.blueGrey[700],
      child: Text(
        'Header',
        style: Theme.of(context).textTheme.title.copyWith(color: Colors.white),
      ),
    );
  }
}

Simon, I get this if I scroll the list fast enough:

Unhandled exception:
E/flutter ( 4840): setState() called after dispose(): _StickyHeaderBuilderState#2ad9c(lifecycle state: defunct, not mounted)
_StickyHeaderBuilderState.build.<anonymous closure>.<anonymous closure> (package:sticky_headers/sticky_headers/widget.dart:121:58)

It tells me this:

*This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback. The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.

E/flutter ( 4840): This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().*

I believe the item is being removed from the tree (because of scrolling) before the next frame is displayed.

I get the following error when trying to use a StickyHeader inside a CustomScrollView:

A RenderViewport expected a child of type RenderSliver but received a child of type RenderStickyHeader

It seems to be misleading that the top of the README for the package states:

You can place a StickyHeader or StickyHeaderBuilder inside any scrollable content, such as: ListView, GridView, CustomScrollView, SingleChildScrollView or similar.

Hello. I have one gridview. I am listing 3 pictures per line. I want to put a title on those 3 pictures. I tried an example like in the picture, but it put the whole list. If I just wrap the cachedimagenetwork, this time it adds a title to each image.

I want a title for every line, that is, every 3 pictures. You can see my list from the design in the example I posted.

I searched a lot but couldn't find anything about wrapping the line. Do you have any suggestions?

Thanks in advance.

if itemCount set to 2, will cause crash.

Widget _buildBody(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      physics: BouncingScrollPhysics(),
      itemCount: 2,
      itemBuilder: (context, index) {
        return StickyHeader(
          overlapHeaders: true,
          header: Container(
            height: 50.0,
            color: MyColors.lightGrayColor,
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            alignment: Alignment.centerLeft,
            child: Text('Header #$index',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          content: _buildContent(context),
        );
      },
    );
  }

  Widget _buildContent(BuildContext context) {
    return GridView.builder(
      controller: _scrollController,
      shrinkWrap: true,
      physics: BouncingScrollPhysics(),
      itemCount: 30,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 1,
        crossAxisSpacing: 1,
        childAspectRatio: 1,
      ), 
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 44,
          color: MyColors.backgroundColor,
          child: Text(index.toString()),
        );
      },
    );
  }

@brianegan , pls help to check this crash. Thanks a lot!

This PR partially solves #68.

I achieved this result with StickyHeaderBuilder since it's rebuilt every time its stuck amount changes, but couldn't achieve it yet with just StickyHeader.

It would be nice to be able to nest multiple StickyHeaders and keep the inner ones visible under the outer ones. With the current version of the library the inner ones will go under the outer ones and stick on the top corner of the list making them not visible.

Current behaviour:

Desired behaviour:

Use case:

ListView.builder(
  primary: controller == null,
  controller: controller,
  itemBuilder: (context, index) {
    return StickyHeader(
      controller: controller, // Optional
      header: Container(
        height: 50.0,
        color: Colors.blueGrey[700]?.withOpacity(.7),
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          'Header #$index',
          style: const TextStyle(color: Colors.white),
        ),
      ),
      content: Column(
        children: [1, 2, 3]
            .map(
              (index) => StickyHeaderBuilder(
                controller: controller,
                builder: (context, stuckAmount) {
                  return Container(
                    height: 30.0,
                    color: Colors.red[700]?.withOpacity(1),
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Subheader #$index',
                      style: const TextStyle(color: Colors.white),
                    ),
                  );
                },
                content: Container(
                  color: Colors.grey[300],
                  child: Image.network(
                    imageForIndex(index),
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 200.0,
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  },
);

When using StickyHeader inside a CustomScrollView with center key, the header immediately before the center header month jumps around; all the other header months have no problems. A plug and play ready example is found below. If there is an easy way to fix the problem, it would be much appreciated. I have tried countless other options...I am really surprised the sticky header is not included with the flutter CustomScrollView widgets.

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';

Map _months = {
  1:'January',
  2:'February',
  3:'March',
  4:'April',
  5:'May',
  6:'June',
  7:'July',
  8:'August',
  9:'September',
  10:'October',
  11:'November',
  12:'December',
};

abstract class BasePage extends StatefulWidget {
  BasePage({Key? key}) : super(key: key);
}

abstract class BaseState<Page extends BasePage> extends State<Page> {
  String screenName();
}
class CalendarPage extends BasePage {
  CalendarPage({Key? key}) : super(key: key);
  @override
  _CalendarPageState createState() => _CalendarPageState();
}


class _CalendarPageState extends BaseState<CalendarPage>{
  _CalendarPageState();


  Key centerKey = ValueKey<String>('center');
  var date = DateTime.now();


 Widget monthBuilder (BuildContext context, int plusMinus){
    int count = (date.month - 13) * -1;
    if(plusMinus==-1){count=date.month-1;}
    return SliverList(
      key: plusMinus==1 ? centerKey:null,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          int month=date.month+index;
          if(plusMinus==-1){month=date.month-1+(-1*index);}
          return StickyHeader(
            header: Container(
              color: Colors.brown,
              padding: EdgeInsets.symmetric(vertical: 12.0),
              alignment: Alignment.center,
              child: Text('${_months[month]}',
                style: Theme.of(context).textTheme.headline2,
              ),
            ),
            content: ListView.builder(
              shrinkWrap: true,
              itemCount: DateTime(date.year,month+1,0).day,//check last day of month for days,
              itemBuilder: (context, int index) {
                return Column(children: [
                  Divider(),
                  TextButton( onPressed: () {  },
                  child: Text('Data'),),
                ]);
              },
            ),
          );
        },
        childCount: count,
      )
    );
  }

  @override
  String screenName() => "Calendar ${date.year}";

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
        center: centerKey,
        slivers: [
          monthBuilder(context, -1),
          monthBuilder(context, 1),
        ],
      );
  }
}

I have a listview and I would like to have a sticky header only on certain rows. However, when I do this the sticky header scrolls off as soon as the next non header row comes into view. Is this type of scenario supported at all?

StickyHeader( header: YyTips( msg: "xiangyu_gps_false".tr, btnTitle: "btn_go_setting".tr, onPressed: () {}, ), content: ws)

当切换到其他pageview页面的时候,会出现异常Rect argument contained a NaN value

When switching to other pageview pages, an exception will appear " Rect argument contained a NaN value "