How to dynamically adjust container size in flutter? - flutter

Question

I am using a white container with height
height: MediaQuery.of(context).size.height
And I am adding several red containers in it. When the number of these inside containers is less, the scrolling works perfectly like this
But as I increase the number of containers inside the big container, scrolling kind of overflows the container, like this
One solution I found out was that if I increase the height of white container, i.e:-
height: MediaQuery.of(context).size.height*7
But it makes the app look ugly and would eventually fail when the number of red containers is further increased. How can I fix this issue?
Code for the Program:-
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Test(),
));
}
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(height: 60.0,),
Container(
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(height: 20.0,),
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
],
)
],
),
),
],
),
),
],
),
),
),
),
);
}
}

Answer 1

Okay so after some suggestions from comments I myself found the solution.
Instead of using listview inside the white container, I removed it and wrapped the white container with SingleChildScrollView and also wrapped it with Flexible
Now the container automatically adjusts according to the amount of containers in it.
Fixed code:-
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
SingleChildScrollView(
child: Flexible(
child: Container(
margin: EdgeInsets.only(
top: 180.0,
),
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//app work
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
],
)
//add button
],
),
),
],
),
),
),
),
),
],
),
),
),
),
),
);
}
}

Answer 2

To achieve your desired layout try playing with padding value of this container
Container(padding: EdgeInsets.only(top: 35.0, ),
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
in my case i used padding: EdgeInsets.only(top: 35.0, ),
result

Answer 3

First, you need to get the correct screen height by reducing the extra top padding and appBar size (if that page contains appBar)
To do that simply add
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"Hello"
),
backgroundColor: const Color(0xFF005898),
)),
Then add this to height
double screenHeight = MediaQuery.of(context).size.height -
50 -
MediaQuery.of(context).padding.top; // Top Screen Height - appbarHeight - Top Padding(That top status bar on every phone)
Then Everything is as same but, Before SingleChildScrollView add a sizedBox then provide screenHeight and width as per requirement then in the child add scrollView and the rest of the code