Question posted in 
more specifically i want to extend this container (the container that has the lorem ipsum in it) to occupy the spaces below it
Container(
decoration: const BoxDecoration(
color: Color(0xFF0F7ECF),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.h),
child: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 14.sp,
color: const Color(0xffF9F9F9),
),
),
),
),
this is the full code of the page
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mediqueue/views/appointment_booking/appointment_booking_page.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.h),
child: Image.asset(
'assets/tmcc.png',
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.w),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Hello, Jordan!',
style:
TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold),
),
ElevatedButton(
onPressed: () => {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color(0xFF0061A1)),
fixedSize: MaterialStateProperty.all<Size>(
Size(100.w, 40.h),
),
),
child: Text(
'Logout',
style: TextStyle(
fontSize: 14.sp, color: const Color(0xfff9f9f9)),
))
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 25.h, 0, 0),
child: Container(
decoration: const BoxDecoration(
color: Color(0xFF007AC2),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
),
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 25.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () => {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation,
secondaryAnimation) =>
const AppointmentBookingPage(),
transitionsBuilder: (context, animation,
secondaryAnimation, child) {
const begin = Offset(1.0, 0.0);
const end = Offset.zero;
const curve = Curves.easeInOutQuart;
var tween = Tween(begin: begin, end: end)
.chain(CurveTween(curve: curve));
var offsetAnimation =
animation.drive(tween);
return SlideTransition(
position: offsetAnimation,
child: child);
},
),
)
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/appointment_booking_icon.png',
width: 100,
height: 100,
),
Text(
'Appointment',
style: TextStyle(
fontSize: 18.sp,
color: const Color(0xffF9F9F9)),
),
Text(
'Booking',
style: TextStyle(
fontSize: 18.sp,
color: const Color(0xffF9F9F9)),
)
],
),
),
GestureDetector(
onTap: () => {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/track_my_queue_icon.png',
width: 100,
height: 100,
),
Text(
'Track',
style: TextStyle(
fontSize: 18.sp,
color: const Color(0xffF9F9F9)),
),
Text(
'My Queue',
style: TextStyle(
fontSize: 18.sp,
color: const Color(0xffF9F9F9)),
)
],
)),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 25.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () => {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/profile_icon.png',
width: 100,
height: 100,
),
Text(
'Profile',
style: TextStyle(
fontSize: 18.sp,
color: const Color(0xffF9F9F9)),
)
],
))
],
),
)
],
),
),
),
Container(
decoration: const BoxDecoration(
color: Color(0xFF0F7ECF),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.h),
child: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 14.sp,
color: const Color(0xffF9F9F9),
),
),
),
),
]),
),
),
);
}
}
I have tried to chatgpt, gemini, etc. this but they don’t really know how to solve the problem. I have tried to use expanded, constraints:BoxConstraints.expand(), height: double.infinity, IntrinsicHeight, etc. but none of them works and they all result to making the screen just plain white.
2
Answers
You just need to add this to your code inside the container
height: MediaQuery.of(context).size.height;Expanded is the way to go.
If you expand the container in a column it takes as much space as it can on the Mainaxis (vertical).
If theres something below the expanded container its either below it in the children list, or part of a parentwidget from the Column.