i’m trying to integrate a listView.builder in my UI! First of all, the whole content of the screen is inside a CustomScrollView that has silver widgets inside of it. Everything works pretty fine unless that my listview is not scrolling.
Here is the code:
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: CustomAppBar(),
body: CustomScrollView(
physics: ClampingScrollPhysics(),
slivers: <Widget>[
_buildHeader(screenHeight),
_buildBody(screenHeight),
],
),
);
}
}
The _buildBody
code:
SliverToBoxAdapter _buildBody(double screenHeight) {
return SliverToBoxAdapter(
child: Column(
children: [
Container(
width: 100,
height: 65,
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: ElevatedButton(
onPressed: () {},
child: Text(
'Add',
style: TextStyle(fontSize: 18),
),
style: ElevatedButton.styleFrom(
shape: StadiumBorder(),
backgroundColor: Palette.primaryColor),
),
),
),
SizedBox(
height: 10,
),
ListView.builder(
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 6,
itemBuilder: ((BuildContext context, int index) {
return Container(
margin: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0,
),
padding: const EdgeInsets.all(10.0),
height: screenHeight * 0.15,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFFAD9FE4), Palette.primaryColor],
),
borderRadius: BorderRadius.circular(20.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Image.asset(
"assets/worker.png",
height: 80,
width: 80,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Somme: 50 €',
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: screenHeight * 0.01),
Text(
'Date: 19 novembre 2022',
style: TextStyle(fontSize: 10, color: Colors.white),
),
SizedBox(height: screenHeight * 0.01),
Text(
'Follow the instructionsnto do your own test.',
style: const TextStyle(
color: Colors.white,
fontSize: 16.0,
),
maxLines: 2,
),
],
)
],
),
);
}))
],
),
);
}
I tried adding shrinkWrap: true
as well as the scroll direction. Also tried wrapping it inside a SingleScrollChildView, none of the solutions worked for me. I appreciate any kind of help!
2
Answers
You can use
physics: const NeverScrollableScrollPhysics(),
on listView, the parent widget is already handling the scroll event. But you can replace listView with Column widget.(we already have on parent, therefor using loop)Instead of using
ListView.Builder
insideCustomScrollView
. It is always better to useSlivers
. Therefore, instead of wrappingListView.builder
withSliverToBoxAdapter
, useSliverList
. Here is the detail code I have refactored below for you. Or you can directly visit this link where you can play with the refactored code.