SingleChildScrollView doesn't scroll screen with ListView.builder - flutter

Question

I'm trying to get it so that all of the items in ListView.builder can be displayed on the screen and seen by scrolling. However, I think because the ListView.builder is in a stack, it is not allowing the whole screen to scroll. I don't want the ListView.builder to scroll on its own, I want only the whole page to be scrollable. Thanks in advance.
import 'sign_up_page.dart';
import 'package:intl/intl.dart';
import 'settings_page.dart';
import 'new_event_page.dart';
import 'event_settings_page.dart';
class HomeScreen extends StatefulWidget {
static const String id = 'home_screen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
double width;
double height;
int mediumScreenSize = 800;
int largeScreenSize = 1000;
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Color.fromRGBO(255, 255, 255, 1),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children:[
Container(
child: AspectRatio(
aspectRatio: mediumScreenSize < height ? 0.76 : 0.87,
),
decoration: BoxDecoration(
color: Color(0xff212a3d),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
),
),
),
Container(
height: height,
child: Column(
children: [
AspectRatio(
aspectRatio: 10,
),
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(width/35),
child: Text('Home',
style: TextStyle(
fontFamily: 'Chivo Bold',
fontSize: mediumScreenSize < height ? 22.0 : 21.0,
color: Colors.white,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: width/10),
child: ButtonTheme(
padding: EdgeInsets.all(0),
minWidth: width/10,
child: FlatButton(onPressed: () {
Navigator.pushNamed(context, SettingsPage.id);
},
child: Image.asset('images/gear.png', height: 22),
),
),
),
],
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: height/5,
),
Container(
padding: EdgeInsets.only(left: width/7.5),
//TO DO: replace fullName variable when user updates user information
child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName, style: TextStyle(
fontFamily: 'Poppins SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 26.0 : 25.0,
letterSpacing: 0.5,
color: Colors.white,
),
),
),
],
),
AspectRatio(
aspectRatio: height > mediumScreenSize ? 4: 7,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: width/1.2,
child: AspectRatio(
aspectRatio: 6.5,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
),
color: Color.fromRGBO(102, 161, 192, 1),
onPressed: () {
EventInformation.eventDate = DateFormat.yMMMMd().format(DateTime.now());
Navigator.pushNamed(context, NewEventPage.id);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: width * 0.015),
child: Image.asset(
'images/+.png',
height: width/16,
),
),
Text(
' Add new event',
style: TextStyle(
color: Colors.white,
fontFamily: 'Chivo Regular',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
],
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: width/15, bottom: width/40),
child: Container(
child: Text('My Events:', style: TextStyle(
fontFamily: 'Overpass SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
letterSpacing: 1.0,
color: Colors.white,
),
),
),
),
],
),
UserInformation.events.length == 0 ? Container (
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AspectRatio(
aspectRatio: height > mediumScreenSize ? 2.5: 4,
),
Text('No events listed', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
],
),):
Expanded(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: UserInformation.events.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: width/20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushNamed(context, EventSettingsPage.id);
},
child: Container(width: width/1.2,
height: width/5.5,
decoration: new BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(15),
boxShadow: [BoxShadow(
color: Color(0x15525768),
offset: Offset(-12,15),
blurRadius: 22,
spreadRadius: 0
),BoxShadow(
color: Color(0x0c525768),
offset: Offset(12,-15),
blurRadius: 22,
spreadRadius: 0
) ],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: width/10),
child: Text(UserInformation.events[index],
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Color(0xff212a3d),
fontFamily: 'Overpass Bold',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
),
Container(
padding: EdgeInsets.only(right: width/15),
child: new Image.asset(
'images/mini_arrow.png',
height: 30.0,
),
),
],
),
),
),
],
),
);
}
),
),
],
),
),
],
),
],
),
),
);
}
}

Answer 1

add this two line in your listview :-ListView.builder( physics: NeverScrollableScrollPhysics(),

Answer 2

child: Scaffold(
backgroundColor: Color.fromRGBO(255, 255, 255, 1),
body: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Stack(
children:[
Container(
height: mediumScreenSize < height ? width/0.8 : width/0.8,
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xff212a3d),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
),
),
),
Column(
children: [
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(top: width/9),
child: Text('Home',
style: TextStyle(
fontFamily: 'Chivo Bold',
fontSize: mediumScreenSize < height ? 22.0 : 21.0,
color: Colors.white,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: width/13),
padding: EdgeInsets.only(right: width/10),
child: ButtonTheme(
padding: EdgeInsets.all(0),
minWidth: width/10,
child: FlatButton(onPressed: () {
Navigator.pushNamed(context, SettingsPage.id);
},
child: Image.asset('images/gear.png', height: 22),
),
),
),
],
),
],
),
SizedBox(
height: width/4,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(left: width/7.5),
child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName, style: TextStyle(
fontFamily: 'Poppins SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 26.0 : 25.0,
letterSpacing: 0.5,
color: Colors.white,
),
),
),
],
),
SizedBox(
height: width/4.75,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: width/1.2,
child: AspectRatio(
aspectRatio: 6.5,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
),
color: Color.fromRGBO(102, 161, 192, 1),
onPressed: () {
EventInformation.displayEventDate = DateFormat.yMMMMd().format(DateTime.now());
Navigator.pushNamed(context, NewEventPage.id);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: width * 0.015),
child: Image.asset(
'images/+.png',
height: width/16,
),
),
Text(
' Add new event',
style: TextStyle(
color: Colors.white,
fontFamily: 'Chivo Regular',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
],
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: width/15),
child: Container(
child: Text('My Events:', style: TextStyle(
fontFamily: 'Overpass SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
letterSpacing: 1.0,
color: Colors.white,
),
),
),
),
],
),
],
),
Padding(
padding: EdgeInsets.only(top: width/ 0.9),
child: UserInformation.events.length == 0 ? Container (
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AspectRatio(
aspectRatio: height > mediumScreenSize ? 2.5: 4,
),
Text('No events listed', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
],
),):
ListView.builder(
padding: EdgeInsets.only(top: width/20, bottom: width/20),
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: UserInformation.events.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: width/20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushNamed(context, EventSettingsPage.id);
},
child: Container(width: width/1.2,
height: width/5.5,
decoration: new BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(15),
boxShadow: [BoxShadow(
color: Color(0x15525768),
offset: Offset(-12,15),
blurRadius: 22,
spreadRadius: 0
),BoxShadow(
color: Color(0x0c525768),
offset: Offset(12,-15),
blurRadius: 22,
spreadRadius: 0
) ],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: width/10),
child: Text(UserInformation.events[index],
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Color(0xff212a3d),
fontFamily: 'Overpass Bold',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
),
Container(
padding: EdgeInsets.only(right: width/15),
child: new Image.asset(
'images/mini_arrow.png',
height: 30.0,
),
),
],
),
),
),
],
),
);
}
),
),
],
),
],
),
),
),
This is the way I figured out how to do it without any hardcoded height inputs. The problem was the ListView.builder was in a Container with no specified height.

Answer 3

Inside ListView.builder : use property physics and give NeverScrollableScrollPhysics() as a value ex:
physics: NeverScrollableScrollPhysics(),