for now I have mock of view as presented. I want this app bars title to be twice as big when I'm on the top of the screen with no buttons, and scale smoothly back to current form with two buttons when I scroll down. I tried to experiment with sliverappbar but without effect. I use here scaffold with standard app bar. Is there a convenient way to achieve it, or I have to write it myself. I'd be thankful for any advice.
EDIT: Something like showed here gif
You can use CustomScrollView with Slivers to achieve your desired result. I'm sharing an example for this you can customize it as per your need.
CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: 120,
flexibleSpace: FlexibleSpaceBar(
title: Text("Barb's Latest",style: TextStyle(fontSize: 30),),titlePadding: EdgeInsets.all(15),
),automaticallyImplyLeading: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
height: 100,
margin: EdgeInsets.only(bottom: 10),
color: Colors.red,
),
childCount: 50))
],
)
Related
I am using Flutter to create a Web app.
How can i create a layout_view using the package auto_route that can be scrolled with a single scroll parent. In a way that i don't need to add scroll views on child and create multiple scroll points and bars.
I did something like this:
Scaffold(
backgroundColor: Constants.backgroundColor,
body: CustomScrollView(
primary: true,
slivers: <Widget>[
SliverAppBar(
expandedHeight: Responsive.isSmallScreen(context) ? 93 : 196.0,
backgroundColor: Colors.transparent,
flexibleSpace: const FlexibleSpaceBar(
background: AppBarView(),
),
),
SliverFillRemaining(
hasScrollBody: true,
child: Column(
children: const [
Expanded(child: AutoRouter()),
],
),
)
],
),
)
The problem is that if the AutoRouter is bigger than the remained viewport the bottom is overflowed and i can't scroll. I tried to add SingleChildScrollView as parent of AutoRouter but it doesn't render
I don't want to repeat the AppBarView on all screens, that's why i am using a layout view with an auto router. But at the same time i want to scroll de AppBar along with the rest of the screen.
[ ]'s
I have a fairly complicated screen I am trying to implement in Flutter.
It's a scrollview with a parallax background and...kind of a collapsing toolbar.
I know I have to probably use a NestedScrollView and SliverAppBar(?), but not sure where to start on implementing. I think a picture would best show what I am trying to accomplish:
The list starts below a Container. As you scroll the list, the Container shrinks to a smaller Container and is pinned to the top. Does that make sense? Any help would be greatly appreciated!
This is using SliverAppBar with expandedHeight. I will encourage checking this video.
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: constraints.maxHeight * .3,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Title"),
background: Container(
color: Colors.pink,
),
),
),
SliverToBoxAdapter(
child: Container(
height: constraints.maxHeight * 4,
color: Colors.deepOrange,
),
)
],
),
),
);
}
I need to make a scrollable for all content for partiular page, but the problem is that I need to have dynamic list at the middle, which grows. So I use CustomScrollView. From top to bottom at slivers[] I have SliverToBoxAdapter decorated as I need, then SliverList and then another one SliverToBoxAdapter. This totaly what I need it is scrollable all together, byt decoration problem with SliverList. So i need to wrap somehow SliverList with the same style so it looks like content inside SliverToBoxAdapter (Borders, evevation, background etc). But I cant understand how to achieve this. The CustomScrollView accepts only Slivers..
I tried to put List inside SliverToBoxAdapter but it scrolls separately or...
Ive solved it but I think in comletely wrong way, with wrapShrink to True, but the Docs day it is very expensive.. And also weird because i moreover need to block scroll Physics with NeverScrollableScrollPhysics(). So looking for better solution
Maybe I do not need to use Slivers?
The general problem is I need vertically lets say Container then List (growable) and then another Container under the list, no matter how long the list are.
Like this
container
List with ability to
dynamically grow when user
taps button
Container strongly under
the List with button
by tapping which user add
the element to the List
Any solutions, ideas, advices ...
Thanks for attention)
Code for sake of simplicity
The BoxAdapter and SliverList
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Center(
child: Container(
child: Column(
children: [
Characteristics(),
],
),
),
),
),
// this is how I have done
// but do not like not lazy..
// if put SliverList directly cant decorate it..
SliverToBoxAdapter(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (contex, index){
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
itemCount: 20,
)
),
],
),
I'm currently working on a screen that includes a Flutter Stepper within a CustomScrollView. There is a SliverAppBar and the Stepper is wrapped in a SliverToBoxAdapter and a Padding. Unfortunately, there is a blank space above the Stepper that doesn't seem to belong to the Padding or the Box Adapter. If I add the Stepper to a normal Scaffold, this space is not visible. Please see the attached screenshots. Does anyone know how to solve that? Thanks in advance!
Here is the code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
snap: false,
floating: false,
automaticallyImplyLeading: false,
expandedHeight: 250,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20))),
flexibleSpace: FlexibleSpaceBar(...),
),
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverToBoxAdapter(
child: Stepper(...),
),
)
],
),
);
}
And here are some screenshots:
Screen Layout
Screen Layout with Debug Paint
I read about this in another thread just with a ListView instead of a Stepper. The solution is to wrap the Stepper with MediaQuery.removePadding(...) and set the removeTop attribute to true.
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverToBoxAdapter(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Stepper(...)
)
)
)
Hi I was wondering it is possible to have a grid view within a tabbarview which has properties of a sliver so it moves the app bar.
I have a grid view within a tabbarview however it does not cause the tab bar to collapse
This is my code so far
NestedScrollView(
headerSliverBuilder: (context, value) {
return SliverAppBar(
backgroundColor: Colors.white,
floating: true,
pinned: false,
stretch: false,
snap: false,
(...)///Collapsible space etc
);
},
body: TabBarView(
children: [
///Other widgets
(...)
///My gridview
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: List.generate(10, (index) {
return Container(
height: 100.0,
width: 100.0,
color: Colors.pink,
child: Text(index.toString()),
);
}),
)
]
)
)
Edit Below
[EDIT]
Set shrinkWrap to true
Sets physics to NeverScrollableScrollPhysics()
set shrinkWrap to true and physics to NeverScrollableScrollPhysics() to your GridView.
This is useful when you add a scrollable widget inside another scrollable widget.