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(...)
)
)
)
Related
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'm trying to make an event page for an app where user can view events that have a banner image and some other useful information. I really like the idea of implementing a SliverAppBar with the banner, so that the user can scroll to see more information. For this I seem to need a CustomScrollView with a SliverAppBar and FlexibleSpaceBar.
All tutorials I have seen online assume that the rest of the screen should be a list of sorts, but I rather want something like a Column widget. A Column has unbounded height, however, which causes overflow errors in the CustomScrollView. I could wrap it in a Container with specified height, but the contents of the body are of variable size, so that is not ideal. Is there a way to have a SliverAppBar and a Column work side by side?
I want something along the lines of this:
class ActivityPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
background: Image(someImage),
),
expandedHeight: Image,
floating: false,
pinned: true,
snap: false,
),
Column(
children: [
someChildren,
]
),
)
]),
),
);
}
It should be possible, because it seems to me a somewhat common pattern, but I have looked around a lot and I can only find examples where the body consists of lists...
For anyone having the same struggle: here's the solution I just found:
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: this.color,
flexibleSpace: FlexibleSpaceBar(
background: YourImage(),
),
)
];
},
body: Container(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
WidgetOne(),
WidgetTwo()
]);
})),
),
)),
);
}
Use SliverList and SliverChildListDelegate instead of a Column.
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Container(color: Colors.green),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(color: Colors.yellow, height: 400),
Container(color: Colors.red, height: 800),
]),
),
],
),
);
}
Use ListView instead of Column. ListView has dynamic size
For me the best way is to use SliverToBoxAdapter. Just wrap your Column in a Container and then wrap this Container in a SliverToBoxAdapter and it should work fine.
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.
A Simple example would be:
Scaffold(
floatingActionButton: _fab(),
floatingActionButtonLocation: _fabLocation(),
body: Scrollbar(
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
automaticallyImplyLeading: false,
leading: null,
backgroundColor: Theme.of(context).colorScheme.secondary,
title: AutoSizeText(
_catalogSearchRatio,
style: Theme.of(context).textTheme.title.copyWith(
color: Theme.of(context).colorScheme.onSecondary),
),
floating: true,
pinned: false,
),
SliverFixedExtentList(
itemExtent: 90.0,
delegate: SliverChildBuilderDelegate((context, index) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 5.0),
child: CatalogItems.medidaGroups
.contains(_itemsCatalogDisplay[index].group)
? _medidasCard(
index, _itemsCatalogDisplay, _catalogSearchQuery)
: _catalogCard(index, _itemsCatalogDisplay,
_catalogSearchQuery, _cartItems, _filteredGroups),
);
}, childCount: itemsCatalogDisplayLength),
),
],
controller: _catalogScrollController,
),
),
);
In the above example, a Scrollbar can be used and that's fine. BUT you can't drag the scrollbar. So I am using a package called draggable_scrollbar which lets me drag the scrollbar. However, I can't seem to replace the scrollbar I have in the example because it gives me the can't be assigned to BoxScrollView error.
It works if it's just a Listview or a Listview.builder or even a GridView
Start by importing the Cupertino package like below..
Import 'package: flutter/cupertino.dart';
Now, inside your class which contains your ScrollViews add the ScrollController like below...
final ScrollController myScrollWorks = ScrollController();
Now wrap any of your ScrollViews... which in your case is a CustomScrollView with the code below
body: PrimaryScrollController(
controller: myScrollWorks,
child: CupertinoScrollbar(
child: CustomScrollView(
slivers:[
your slivers code here
];
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(
...