I am trying to make a collapsible toolbar that shrinks when scrolling the page.
For that, I am using Slivers. By using SliverList
, when the data gets scrolled, it goes up in the phone screen top battery and time transparent bar. Hence, I want to give the list fixed height so that it gets scrolled in a limited area.
I tried putting the SliverList
into a SingleChildScrollView
, a SizedBox
, or a Container
. But none worked.
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Container(
color: Colors.white,
child: Text("Text"),
);
},
chikdCount:100,
),
You can change the height of slivers by using itemExtend
property in SliverFixedExtentList
. Henceforth all the children will take the same height as 150.0. Can you check the below code?
SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('SliverAppBar'),
backgroundColor: Colors.green,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset('assets/forest.jpg', fit: BoxFit.cover),
),
),
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
Container(color: Colors.red),
Container(color: Colors.purple),
Container(color: Colors.green),
Container(color: Colors.orange),
Container(color: Colors.yellow),
Container(color: Colors.pink),
],
),
),
],
));
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.