A RenderFlex overflowed by 4.8 pixels on the bottom. The relevant error-causing widget was Column - flutter

Question

I am Getting An error (overflowed by 4.8 pixels on the bottom). I was creating an emailAuthSheet with showModalBottomSheet while debugging the app it shows the error of overflowed. Can u please guide me...And If Possible can you please also guide me on how to make it responsive for all devices as per their device screen size
The following code is below:
emailAuthSheet(BuildContext context) {
return showModalBottomSheet(
context: context,
builder: (context) {
return Container(
child:
Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 150.0),
child: Divider(
thickness: 4.0,
color: constantColors.whiteColor,
),
),
Provider.of<LandingService>(context,listen: false).passwordLessSignIn(context),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MaterialButton(
color: constantColors.blueColor,
child: Text(
'Log in',
style: TextStyle(
color: constantColors.whiteColor,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
onPressed: () {}),
MaterialButton(
color: constantColors.redColor,
child: Text(
'Sign in',
style: TextStyle(
color: constantColors.whiteColor,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
onPressed: () {})
],
),
]),
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: constantColors.blueGreyColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0))));
});
}
Below is the pic of the flutter app and error

Answer 1

Wrap your container with singleChildScrollView
emailAuthSheet(BuildContext context) {
return showModalBottomSheet(
context: context,
builder: (context) {
return SingleChildScrollView(
child: Container(
child:
Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 150.0),
child: Divider(
thickness: 4.0,
color: constantColors.whiteColor,
),
),
Provider.of<LandingService>(context,listen: false).passwordLessSignIn(context),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MaterialButton(
color: constantColors.blueColor,
child: Text(
'Log in',
style: TextStyle(
color: constantColors.whiteColor,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
onPressed: () {}),
MaterialButton(
color: constantColors.redColor,
child: Text(
'Sign in',
style: TextStyle(
color: constantColors.whiteColor,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
onPressed: () {})
],
),
]),
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: constantColors.blueGreyColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0)))),
);
});
}

Answer 2

Just add 'isScrollControlled' parameter true to showModalBottomSheet.
And changed Column widget to Wrap widget.
(I removed some defines and widget because of leak of data)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
emailAuthSheet(BuildContext context) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return Container(
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 150.0),
child: Divider(
thickness: 4.0,
),
),
Container(height: 450, color: Colors.blue[100]),
// Provider.of<LandingService>(context,listen: false).passwordLessSignIn(context),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MaterialButton(
child: Text(
'Log in',
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.bold),
),
onPressed: () {}),
MaterialButton(
child: Text(
'Sign in',
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.bold),
),
onPressed: () {})
],
),
],
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {
emailAuthSheet(context);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Container();
}
}