ListView.builder is not scrolling in flutter - flutter

Question

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 instructions\nto 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!

Answer 1

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)
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,
),
for (int i = 0; i < 6; i++)
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 instructions\nto do your own test.',
style: const TextStyle(
color: Colors.white,
fontSize: 16.0,
),
maxLines: 2,
),
],
)
],
),
)
],
),
);
}

Answer 2

Instead of using ListView.Builderinside CustomScrollView. It is always better to use Slivers. Therefore, instead of wrapping ListView.builder with SliverToBoxAdapter, use SliverList. 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.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: const DashboardScreen(),
debugShowCheckedModeBanner: false,
);
}
}
class DashboardScreen extends StatefulWidget {
const DashboardScreen({super.key});
#override
State<DashboardScreen> createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
#override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(),
body: CustomScrollView(
physics: ClampingScrollPhysics(),
slivers: <Widget>[
// your build header widget
SliverToBoxAdapter(
child: 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: Colors.red,
),
),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 10),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, 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), Colors.red],
),
borderRadius: BorderRadius.circular(20.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// Image.asset(
// "assets/worker.png",
// height: 80,
// width: 80,
// ),
//
Container(
height: 80,
width: 80,
child: Text("A"),
),
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 instructions\nto do your own test.',
style: const TextStyle(
color: Colors.white,
fontSize: 16.0,
),
maxLines: 2,
),
],
)
],
),
);
}),
)
],
),
);
}
}