Scroll not working in vertical list created using ListView? - flutter

Question

I've created a vertical list inside a scrollable container. But the issue I'm facing is that the list is not scrolling.
This is the component which creates the parent container.
class _MainPageState extends State<MainPage> {
SharedPreferences sharedPreferences;
String _date = "Today";
#override
void initState() {
super.initState();
this.checkLoginStatus();
}
checkLoginStatus() async {
sharedPreferences = await SharedPreferences.getInstance();
if (sharedPreferences.getString("token") == null) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (BuildContext context) => Login(),
),
(Route<dynamic> route) => false,
);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: loggedInBar(sharedPreferences, context),
drawer: appDrawer(sharedPreferences, context),
body: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: hexToColor("#FFFFFF"),
),
child: Column(
children: <Widget>[
hero(),
SizedBox(height: 10),
Container(
padding: const EdgeInsets.fromLTRB(30, 20, 30, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
customText(
'$_date',
"#000000",
"26.0",
TextAlign.center,
"Roboto Black",
FontWeight.w900,
),
OutlineButton(
child: Container(
alignment: Alignment.center,
height: 42.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
customText(
"CHOOSE DAY",
"#EC2F3C",
"18",
TextAlign.center,
"Roboto Bold",
FontWeight.w800,
),
Icon(
Icons.date_range,
size: 22.0,
color: hexToColor("#EC2F3C"),
),
],
),
)
],
),
],
),
),
onPressed: () {
DatePicker.showDatePicker(context,
theme: DatePickerTheme(
containerHeight: 210.0,
),
showTitleActions: true,
minTime: DateTime(
DateTime.now().year - 100,
DateTime.now().month,
DateTime.now().day,
),
maxTime: DateTime(
DateTime.now().year - 17,
DateTime.now().month,
DateTime.now().day,
), onConfirm: (date) {
print('confirm $date');
var dateString = date;
var formattedDate = Jiffy(dateString).yMMMd;
setState(() {
_date = formattedDate;
});
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
color: hexToColor("#efefef"),
splashColor: hexToColor("#efefef"),
highlightElevation: 2,
borderSide: BorderSide(
color: hexToColor("#EC2F3C"),
width: 2,
),
highlightedBorderColor: hexToColor("#EC2F3C"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3),
),
),
],
),
),
AllEvents(), // the widget which creates the list(mentioned below)
SizedBox(height: 30),
footer(),
],
),
),
),
);
}
}
The widget which creates the list is this.
class _AllEventsState extends State<AllEvents> {
final String url = "<api url>";
List data;
#override
void initState() {
super.initState();
this.getAllEvents();
}
createRoute(id) {
Navigator.pushNamed(context, '/eventdetail', arguments: id);
}
Future<String> getAllEvents() async {
var response = await http.get(
Uri.encodeFull(url),
headers: {"Accept": "application/json"},
);
setState(() {
var convertDataToJson = jsonDecode(response.body);
data = convertDataToJson["events"];
});
return "Success";
}
#override
Widget build(BuildContext context) {
ScrollController _controller = new ScrollController();
return Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
controller: _controller,
shrinkWrap: true,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext cont, int index) {
// format date
var dateString = data[index]["eventDate"];
var eventDate = Jiffy(dateString).MMMEd;
if (data == null) {
return Center(
child: Container(
padding: const EdgeInsets.fromLTRB(30, 20, 30, 20),
child: CircularProgressIndicator(),
),
);
} else {
return Container(
padding: const EdgeInsets.fromLTRB(30, 7, 30, 7),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new InkWell(
onTap: () {
createRoute(data[index]['_id']);
},
child: Card(
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: hexToColor("#EBEBEB"),
),
borderRadius: BorderRadius.circular(8.0),
),
padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
customText(
eventDate.toString(),
"#000000",
"20.0",
TextAlign.left,
"Roboto Black",
FontWeight.w900,
),
customText(
"10, 9",
"#000000",
"20.0",
TextAlign.right,
"Roboto Black",
FontWeight.w900,
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: customText(
"${data[index]['city']} | ${data[index]['arenaName']} | ${data[index]['categories'][0]['title']}",
"#000000",
"18.0",
TextAlign.left,
"Roboto Black",
FontWeight.w900,
),
),
],
),
],
),
),
),
),
],
),
),
);
}
},
),
);
}
}
The scroll is only working on touching outside the list area and once the list area covers the entire screen I'm unable to scroll the page further. I think I'm doing many mistakes here as I'm a noob in flutter. I'm unable to wrap my head around what I'm doing wrong as I don't think this is how it's supposed to work.
Please help me fix this issue. Any help would be great? Thank you

Answer 1

change the scroll physics of list to NeverScrollableScrollPhysics
ListView.builder(
scrollDirection: Axis.vertical,
physics: const NeverScrollableScrollPhysics(),
controller: _controller,
shrinkWrap: true,
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext cont, int index) {
// code for building list item
});