So I'm having some difficulty using the following Setup:
CustomScrollView(
slivers: [
SliverAppBar(...),
SliverToBoxAdapter(SomeRandomWidget),
SliverPersistentHeader(TabBar),
SliverFillRemaining(TabBarView)
])
So the TabBarView contains a Column on one tab, that overflows the screen. The issue is, that even though SliverFillRemaining is obviously not the right choice for the overflowing Widget but sadly as TabBarView looses the hasSize property of its children, I don't know what other Widget I could use to get the layout going. The goal is to achieve something like this (shows the current overflow):
EDIT: Here is a working example on DartPad: https://dartpad.dev/bda4cc5fd2aea292310fe05daa440760
try using extended_nested_scroll_view, maybe that's what you looking for
add floating: true, under pinned: true,
Related
What I'm trying to achieve:
Picture 1: View should be scrollable and the NoData container should fill up the remaining space.
SliverFillRemaining just scrolls under the SliverAppBar which is not wanted - it should stop at the top which seems not to be possible.
Picture 2: You should be able to scroll away the SliverAppBar, Background, TabBar, etc and view the No Data in full like there never was a SliverAppBar there (at least the expanded portion of it).
Picture 3: Now there's ONE content - I still want the view to behave the same.
Currently this just means the screens looks like Picture #1 with a Row inserted. Eh? Ugly.
Picture 4: Now there's many rows of content - the view should scroll away the SliverAppBar and continue with the scroll view.
But this is not what it looks like. If there's no "body" in the Widget the SliverAppBar just sits there. Adding a secondary scrolling view for the Rows just means it scrolls by itself while the SliverAppBar still just sits there. Using a SliverFillRemaining scrolls below the SliverAppBar even though there's just one row of content? That's not the remaining space? That's remaining space + AppBar - which is more than what's remaining.
In this case the SliverAppBar consists of this:
SliverAppBar(
expandedHeight: 512,
collapsedHeight: kToolbarHeight,
toolbarHeight: kToolbarHeight,
pinned: true,
floating: false,
snap: false,
elevation: 0,
backgroundColor: theme.primaryColor,
leading: CloseButton(onPressed: onBackButton),
title: Text("Title"),
automaticallyImplyLeading: false,
stretch: true,
flexibleSpace: const FlexibleSpaceBar(
background: getBackground(), // Background Image with some "Info" in it
),
bottom: getBottom(), // TabBar
)
I've tried calculating the screen size remaining once the "SliverAppBar" is scrolled away but then there's the scrolling issue that it won't scroll both views at the same time. Regardless of primary: true/false, shrinkWrap: true/false. Also adding this "calculated" Container to a SliverFillRemaining is just plain ignored. I can set it to any size it still ignores the height set.
But the biggest question is - why would anyone want a SliverAppBar that's not always "scroll away-able" (for lack of a better term). If there's no content in the screen it just looks weird. I at least want the screen excluding the SliverAppBar to always take up the space of the screen with scrolling intact.
Is SliverListDelegate the only alternative? But Row, Row, Row in Picture #4 may not be the only scenario this applies to. In that case it doesn't feel correct to add a ListBuilder everytime you want to add a few Widgets. If I know there will be 4 widgets I'm not sure why I need a ListBuilder for that. But if I'm scrolling 200 items I agree.
In short, most solutions for this seems like hacks as of now.
Suggestions?
Is there a way in Flutter to show a scroll indicator only on a specific widget?
For instance, I have the following widget tree
CustomScrollView(
slivers: [
sliverAppBar(),
sliverToBoxAdapter(), // horizontal list view
SliverList(delegate: SliverChildBuilderDelegate()) // show scrollbar only for this widget
],
),
Here is a demonstration of the iOS app Telegram, I have something similar in my app, notice when the header collapses a gray scroll indicator shows up.
Any idea on how to implement this behavior will be highly appreciated
You can use Scrollable List which provide you the nice way to fulfill your requirements
I have a simple ListView with a scrollable child, which works as it should. But the issue is, when I scroll the items of ScrollableChild and it reaches its last child, it doesn't scroll the parent ListView. How can I achieve this behaviour?
ListView(children: [
...items(5),
ScrollableChild(),
...items(30),
])
I have tried to use the NestedScrollableWidget but unable to find any working solution.
Sample Code
I've tried to use the CustomScrollView, but unfortunately, the result is the same.
CustomScrollView(slivers: [
SliverList(delegate: SliverChildListDelegate(items(5))),
SliverToBoxAdapter(child: ScrollableChild()),
SliverList(delegate: SliverChildListDelegate(items(50))),
]),
Sample Code
The expected behavior can be viewed in this [Video].
the code I have shared works fine in a browser without any issue if you scroll it using the mouse wheel only.
When the blue child items scroll reaches at the end. it just scrolls the parent, that's what I am looking for.
Often when scroll is fast enough my app shows a small transparent line between scrolling view and persistent header.
Minimal reproducible code:
https://gist.github.com/Moonspeaker/0e8573ff6620a7e00b8f7b04937b51a1
This is how it looks recorded on video:
https://www.youtube.com/watch?v=DDxu1NTkaMA&feature=youtu.be
I have no clue how to fix this. The issue seems to be in Align widget with Alginment.bottomCenter. Column with MainAxisAlignment.end works the same way.
Try wrapping your SliverPersistentHeader with a SliverOverlapAbsorber
usually when working with NestedScrollView you will need to wrap the header in this object in order to not encounter rare scrolling artifacts like the red line you described.
I was not able to reproduce the issue with the change stated below.
But you could also take a look to SliverOverlapInjector and the NestedScrollView class documentation which has examples using both of these widgets
...
NestedScrollView(
headerSliverBuilder: (context, scrolling) => [
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverPersistentHeader(
delegate: _Delegate(),
pinned: true,
),
...
I'm using SliverAppBar and SliverList as main containers in my app.
When I try to wrap SliverList in Scrollbar widget, I get an error, and when I wrap whole CustomScrollView in Scrollbar, it overlaps SliverAppBar.
So how can I show scrollbar indicator only in my SliverList?
Thanks in advance.
Check out #JLarana's answer at
https://stackoverflow.com/a/62938436/10647220
But basically what you need to do is:
ScrollController _scrollController = ScrollController();
...
body: PrimaryScrollController(
controller: _scrollController,
child: CupertinoScrollbar(
child: CustomScrollView(
slivers:[
your slivers code here
]
If I understand your question correctly... as of Flutter 1.12 released in Dec 2019, I think this issue is currently tracked under
https://github.com/flutter/flutter/issues/13253
I'm not aware of a easy solution for this(maybe NestedScrollView will solve your problem, but it has some subtle fidelity issues so I don't want to use).