I have a sliverAppbar and a sliver list that scrolls. I however need a fixed container at the bottom of the screen that does not move regardless of scrolling position or anything else on screen, the equivalent of position fixed
in web CSS. I have used a SliverToBoxAdapter
with a stack
and positioned
widget to implement this but it throws an error
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
slivers: [
SliverAppBar(
primary: true,
pinned: true,
snap: false,
elevation: 1.0,
backgroundColor: Colors.blueAccent,
floating: false,
expandedHeight: 200.0,
title: Text(
"Title",
style: TextStyle(
// color: Colors.grey[900]
),
),
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
"https://images.pexels.com/photos/20990/pexels-photo-20990.jpeg?auto=compress&cs=tinysrgh=650&w=940",
height: double.infinity,
width: double.infinity,
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(color: Colors.red, height: 150.0),
Container(color: Colors.purple, height: 150.0),
Container(color: Colors.green, height: 150.0),
Container(color: Colors.red, height: 150.0),
Container(color: Colors.purple, height: 150.0),
Container(color: Colors.green, height: 150.0),
])),
SliverToBoxAdapter(
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 80.0,
color: Colors.yellowAccent,
),
),
],
)),
],
),
);
}
You could try and add a bottomNavigationBar to the Scaffold
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
slivers: []
),
bottomNavigationBar: Container(),
);
}
```
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.