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
Related
I have this design, The first section in the red box is fixed height size, and The second section is the dynamic height (ListviewBuilder) which changed the content based on the tabBar.
My question is How can I use the TabBar view inside the scrollable widget (custom scroll view/listview etc..)
the solution That I currently found is to use a customScrollView and use SliverFillRemaining like that
SliverFillRemaining(
child: TabBarView(
children: [],
),
),
but that adds extra white space at the bottom of the list and I can't remove it by
making hasScrollBody property false
You could probably achieve what you want with this kind of template :
Scaffold(
body: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .33,
child: Container(/* Content of the first section */),
),
Expanded(
child: DefaultTabController(
length: 2,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 50,
child: TabBar(
tabs: [Text("Guest"), Text("Service")],
),
),
),
SliverFillRemaining(
child: TabBarView(
children: [
// Your ListView Builder here
],
),
),
],
),
),
),
],
),
);
Seeing the bit of code you posted, it is probably close to what you already have but after test it doesn't adds extra white space at the bottom.
If it continue to display the same behavior, adding a little more context could help us provide a more accurate answer.
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))
],
)
I have a screen with a graph and some buttons and then some nav buttons...
in portrait, everything fits on the screen, but I want the nav buttons to be at the bottom of the screen, and the graph to be at the top of the screen
in landscape-phone, there's not enough room...
So I put the whole thing into a SingleChildScrollView(child:column(child: [stuff, navbuttons]), but that resulted in everything being close together and centered.
I tried SingleChildScrollView(child:column(child: [stuff, Spacer, navbuttons]), but that makes a RenderFlex children have non-zero flex but incoming height constraints are unbounded error.
What's the way to make a "SpacerBigEnough" class?
I've accomplished similar UI by using a CustomScrollView, like so:
CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Column(
children: [stuff],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Align(
alignment: Alignment.bottomCenter,
child: navbuttons,
),
)
],
)
I have used SilverAppBar but don't know how to add a drawer to it. I just want an app bar with a drawer that hides on scrolling
Note that the Scaffold takes care of all of the major behavior associated with Material design.
If you add the drawer field to your Scaffold, it will automatically add a hamburger menu icon to the left hand side of your SilverAppBar in flutter.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Drawer - Sliver AppBar'),
)],
),
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Text(' I am Drawer'),
curve: SawTooth(12),
),
],
),
),
);
}
I'm trying to display a flexible SliverAppBar below a custom app bar (let's say it's a container with a height of 80.0).
When making the SliverAppBar the top element, it works fine, but when it's the second one, there is a top-padding as big as the Android UI interface.
Scaffold(
body: Column(children: <Widget>[
Container(height: 80.0),
Expanded(child: _content())
]),
);
_content()
return CustomScrollView(slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.red,
leading: PopContentButton(),
title: Text('Test'),
snap: true,
pinned: true,
floating: true,
bottom: TabBar(
tabs: _tabs(),
controller: TabControllerExtended(length: 4, vsync: this),
),
),
SliverList(delegate: new SliverChildListDelegate(buildTextViews(50)))
]);
This is not how it should look:
(source: bilder-upload.eu)
It should look like:
(source: bilder-upload.eu)
Wrap you - SliverAppBar with MediaQuery.removePadding.
Updated Code :
....
MediaQuery.removePadding(
context: context,
removeTop: true,
child: SliverAppBar(
...