How to add Scrolling Functionality in Scaffold - flutter

Question

I'm getting the problem when I add Scrolling functionality in Scaffold, here I have tried SingleChildScrollView, CustomerScrollView, and ListView but it freezes the UI but when I replaced ti Scaffold to LayoutBuilder it works but all the background my UI got black.
I just want to add scrolling functionally to Scaffold.
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
...Some Code...
},
child: Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomLeft,
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
)),
Expanded(
flex: 6,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
)),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
))
],
),
) // Scaffold
);// WillPopScope
}

Answer 1

Try This
return Scaffold(
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: false,
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
],
),
),
),
),
]

Answer 2

Don't use Expanded inside any scrolling container unless you wrap it in a fixed bound on its main axis.
Like in your case main axis is vertical and you are using expanded in it, since expanded needs a bound to limit its expansion, you should've remove that expanded thing or just wrap the container in a SizedBox for a specific height.
Than you can wrap the sized box in any scroll container which suits you.
Hope it helps!

Answer 3

In your code, change Column to ListView, and remove the expanded widget. you can use fixed height or MediaQuery.of(context).size.height * (any ratio) to the containers, or just don't specify any container height so it'll take its children's height.
here's the code will look like:
body: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
// height: MediaQuery.of(context).size.height * (any ratio) / fixed height
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
),
Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
)
],
),