Flutter SingelChildScrollView for column is not working - flutter

Question

I have the following code in flutter. The first Expanded with flex 1 can be scrolled if needed but the next Expanded with flex 2 and the list of widgets (createButtons(answerList)) can not be scrolled and I can not figure out why? Both have the scrollable in them!
import 'package:flutter/material.dart';
import '../../backend/QuestionaireConstants/question.dart';
import '../../backend/utils/constants.dart';
import '../../backend/utils/setupcomingRoute.dart';
import '../../backend/widgets/button_content.dart';
import '../../backend/widgets/reusable_cart.dart';
int selectedAnswer = -1;
int counter = 0;
Color determineColor(int selection) {
return selectedAnswer == selection ? Colors.white : Colors.black;
}
class SelectionWindow extends StatefulWidget {
const SelectionWindow({Key? key}) : super(key: key);
#override
_SelectionWindowState createState() => _SelectionWindowState();
}
class _SelectionWindowState extends State<SelectionWindow> {
#override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as List<Question>;
int count = args[0].counter;
int arraylen = args.length;
List answerList = args[count].possibleAnswers;
String upcomingRoute = setUpcomingRoute(count, arraylen, args);
List<Widget> createButtons(list) {
List<Widget> buttons = [];
//creating single choice buttons
for (var i = 0; i < list.length; i++) {
buttons.add(
Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedAnswer = i;
});
},
child: ReusableCard(
colour: selectedAnswer == i
? Colors.blue.shade900
: Colors.blue.shade200,
cardChild: ButtonContent(
label: args[count].possibleAnswers[i],
textColour: determineColor(i),
),
),
),
),
],
),
);
}
return buttons;
}
//showing error screen
Future<void> _showMyDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Alert'),
content: SingleChildScrollView(
child: ListBody(
children: const <Widget>[
Text('Please select one answer before continuing.'),
],
),
),
actions: <Widget>[
TextButton(
child: const Text(
'Approve',
style: TextStyle(fontSize: 22),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
return Scaffold(
appBar: AppBar(
iconTheme: backwardsArrowBlack,
automaticallyImplyLeading: false,
title: appBarText,
backgroundColor: Colors.blue.shade100,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Text(args[count].questionText,
style: multipleChoiceTextStyle),
),
),
),
Expanded(
flex: 2,
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: createButtons(answerList),
),
),
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: GestureDetector(
onTap: () {
if (args[0].counter > 0) {
args[0].counter -= 1;
args[count - 1].givenAnswers.clear();
}
Navigator.pop(context);
},
child: backwardsButton,
),
),
Expanded(
child: GestureDetector(
onTap: () {
if (selectedAnswer == -1) {
_showMyDialog();
} else {
args[count].givenAnswers.add(args[count]
.possibleAnswers[selectedAnswer]);
selectedAnswer = -1;
if (args[0].counter == arraylen - 1) {
args[0].counter += 1;
Navigator.pushNamed(context, '/endScreen',
arguments: args)
.then((_) => setState(() {}));
} else {
args[0].counter += 1;
Navigator.pushNamed(
context,
upcomingRoute,
arguments: args,
).then((_) => setState(() {}));
}
}
},
child: forwardButton,
),
),
],
),
),
),
],
),
),
],
),
);
}
}
The emulator shows the following error in case of having many answers in the list that are not fit in the page:
====================================================================================================
D/EGL_emulation(15191): app_time_stats: avg=10.35ms min=0.79ms max=89.84ms count=52
D/EGL_emulation(15191): app_time_stats: avg=104.68ms min=0.77ms max=1043.27ms count=11
D/EGL_emulation(15191): app_time_stats: avg=69.44ms min=11.30ms max=1017.83ms count=19
I/flutter (15191): type 'Null' is not a subtype of type 'FutureOr<int>'
D/EGL_emulation(15191): app_time_stats: avg=151.10ms min=0.54ms max=925.70ms count=12
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 203 pixels on the bottom.

Answer 1

This worked:
import 'package:flutter/material.dart';
import '../../backend/QuestionaireConstants/question.dart';
import '../../backend/utils/constants.dart';
import '../../backend/utils/setupcomingRoute.dart';
import '../../backend/widgets/button_content.dart';
import '../../backend/widgets/reusable_cart.dart';
int selectedAnswer = -1;
int counter = 0;
Color determineColor(int selection) {
return selectedAnswer == selection ? Colors.white : Colors.black;
}
class SelectionWindow extends StatefulWidget {
const SelectionWindow({Key? key}) : super(key: key);
#override
_SelectionWindowState createState() => _SelectionWindowState();
}
class _SelectionWindowState extends State<SelectionWindow> {
#override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as List<Question>;
int count = args[0].counter;
int arraylen = args.length;
List answerList = args[count].possibleAnswers;
String upcomingRoute = setUpcomingRoute(count, arraylen, args);
List<Widget> createButtons(list) {
List<Widget> buttons = [];
//creating single choice buttons
for (var i = 0; i < list.length; i++) {
buttons.add(
Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
selectedAnswer = i;
});
},
child: ReusableCard(
colour: selectedAnswer == i
? Colors.blue.shade900
: Colors.blue.shade200,
cardChild: ButtonContent(
label: args[count].possibleAnswers[i],
textColour: determineColor(i),
),
),
),
),
],
),
);
}
return buttons;
}
//showing error screen
Future<void> _showMyDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Alert'),
content: SingleChildScrollView(
child: ListBody(
children: const <Widget>[
Text('Please select one answer before continuing.'),
],
),
),
actions: <Widget>[
TextButton(
child: const Text(
'Approve',
style: TextStyle(fontSize: 22),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
return Scaffold(
appBar: AppBar(
iconTheme: backwardsArrowBlack,
automaticallyImplyLeading: false,
title: appBarText,
backgroundColor: Colors.blue.shade100,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Text(args[count].questionText,
style: multipleChoiceTextStyle),
),
),
),
Expanded(
flex: 2,
child: SingleChildScrollView(
child: Column(
children: createButtons(answerList),
),
),
),
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: GestureDetector(
onTap: () {
if (args[0].counter > 0) {
args[0].counter -= 1;
args[count - 1].givenAnswers.clear();
}
Navigator.pop(context);
},
child: backwardsButton,
),
),
Expanded(
child: GestureDetector(
onTap: () {
if (selectedAnswer == -1) {
_showMyDialog();
} else {
args[count].givenAnswers.add(args[count]
.possibleAnswers[selectedAnswer]);
selectedAnswer = -1;
if (args[0].counter == arraylen - 1) {
args[0].counter += 1;
Navigator.pushNamed(context, '/endScreen',
arguments: args)
.then((_) => setState(() {}));
} else {
args[0].counter += 1;
Navigator.pushNamed(
context,
upcomingRoute,
arguments: args,
).then((_) => setState(() {}));
}
}
},
child: forwardButton,
),
),
],
),
),
),
],
),
);
}
}