Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky header goes below floating SliverAppBar() #33

Open
emvaized opened this issue Mar 13, 2020 · 11 comments
Open

Sticky header goes below floating SliverAppBar() #33

emvaized opened this issue Mar 13, 2020 · 11 comments

Comments

@emvaized
Copy link

emvaized commented Mar 13, 2020

When SliverAppBar inside CustomScrollView is set to be shown only on scroll up (floating: true), header stays on its place e.g. goes below appbar.
How to make it shift down on appbar showing?

P.S.: I don't want to use this flutter_sticky_header, since it can't work with ListView builder.

@tp7309
Copy link

tp7309 commented Mar 14, 2020

You can try sticky_and_expandable_list, just use as one SliverList.
example

@emvaized
Copy link
Author

emvaized commented Mar 14, 2020

@tp7309

It works, but for some reason sticky headers now go below statusbar in collapsed mode (code from example_sliver.dart).

ezgif com-video-to-gif

@tp7309
Copy link

tp7309 commented Mar 15, 2020

@tp7309

It works, but for some reason sticky headers now go below statusbar in collapsed mode (code from example_sliver.dart).

The hidden height is statusbar height, I have updated the example project.
Just wrap Scaffold with SafeArea.

@emvaized
Copy link
Author

@tp7309
Great, bug is fixed now! Thanks!

My only question remaining is -- how to make headers and content share the same index in list?
In my case of usage each section contains only one header and one child, and I want them to share the same index.

Current behavior:
Screenshot_20200315_153047

Desired:
Screenshot_20200315_153047

@tp7309
Copy link

tp7309 commented Mar 15, 2020

@tp7309
Great, bug is fixed now! Thanks!

My only question remaining is -- how to make headers and content share the same index in list?
In my case of usage each section contains only one header and one child, and I want them to share the same index.

Echo itemBuilder return the section model and item model, you can get section/header index from section model, example:

            SliverExpandableList(
              builder: SliverExpandableChildDelegate<String, Section>(
                  sectionList: sectionList,
                  headerBuilder: _buildHeader,
                  itemBuilder: (context, section, item, index) {
                    //get sectionIndex by sectionList
                    int sectionIndex = sectionList.indexOf(section);
                    return ListTile(
                      leading: CircleAvatar(
                        child: Text("$sectionIndex"),
                      ),
                      title: Text(item),
                    );
                  }),
            )

@emvaized
Copy link
Author

emvaized commented Mar 15, 2020

@tp7309
Works great now, thanks a lot! Thanks for your help with my issue.

Your package is a great alternative for the two existing 'sticky-headers' packages.
Some ideas for improving:

  1. Built-in collapse animation for setSectionExpanded() method;
  2. Ability to integrate with LiveSliverList from auto_animated package;
  3. Make Section() constructor not only String-oriented, but to accept widgets as well.

@tp7309
Copy link

tp7309 commented Mar 16, 2020

@emvaized
Good idea! Animation support coming soon, you can star repo for receive lastest version update.
Some explanations about Option 3.

@emvaized
Copy link
Author

emvaized commented Mar 16, 2020

@tp7309
Cool, thanks for your work! I'll try it.
I also created a few new issues for further improvement of your package :)

@emvaized
Copy link
Author

emvaized commented Mar 16, 2020

However, I will leave this issue open, since the problem still exists in discussed package.

@slightfoot
Is this project abandoned?

@kanchasohail
Copy link

@tp7309

It works, but for some reason sticky headers now go below statusbar in collapsed mode (code from example_sliver.dart).

ezgif com-video-to-gif ezgif com-video-to-gif

How did you solve this I am facing the same problem can you share the exact solution with me

Uploading VID_20230118_200940.mp4…

@tp7309
Copy link

tp7309 commented Jan 29, 2023

@kanchasohail

you need try or open an issue in flutter_sticky_and_expandable_list

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants