Lost my keyboard when wrapping a container in a container - flutter

I'm trying to learn Flutter. I took an Udemy course and now I'm trying to follow along on a Youtube Tutorial Chat App.
In the section, I've created a sign in screen. The sign in screen is all pushed up to the top of the body: (At this point the keyboard works as its suppose to) To correct the top alignment, the instructor has us wrap the top container (in the body:) in another container and add alignment: Alignment.bottomCenter,. This moves the Textfield() and buttons to the bottom on the screen. But, I no longer get the keyboard in the emulator when clicking the "email" or "password" fields. The instructor shows he has a keyboard error at this point (although his keyboard shows up on his emulator and mine does not) To correct this error, he wraps the new container in a SingleChildScrollView(). and adds the line height: MediaQuery.of(context).size.height - 50, to the container just inside SingleChildScrollView(. At this point his screen in aligned properly and his keyboard works as it should. While my screen is aligned correctly, the keyboard still doesn't work.
any suggestions?
import 'package:flutter/material.dart';
import 'package:flutter_docktalk/widgets/widgets.dart';
class SignIn extends StatefulWidget {
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: mainAppBar(context),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - 50,
alignment: Alignment.bottomCenter,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Email'),
),
TextField(
style: simpleTextStyle(),
decoration: textFieldInputDecoration('Password'),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.centerRight,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Forgot Password?',
style: simpleTextStyle(),
),
),
),
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: const Text(
'Sign In With Google',
style: TextStyle(color: Colors.black87, fontSize: 18),
),
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Don't have an account? ",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
Text(
"Register Now",
style: TextStyle(
color: Colors.white,
fontSize: 17,
decoration: TextDecoration.underline,
),
)
],
),
const SizedBox(
height: 45,
),
],
),
),
),
),
);
}
}

*body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),*

Related

So I need to know how to provide spacing between my textfield and button on the screen

So Basically the issue i am facing is I need to provide equal amount of spacing from the left side and the right side of the screen
The code of my file is attached below the code is in flutter
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class PhoneNumberDetails extends StatefulWidget {
const PhoneNumberDetails({super.key});
#override
State<PhoneNumberDetails> createState() => _PhoneNumberDetailsState();
}
class _PhoneNumberDetailsState extends State<PhoneNumberDetails> {
TextEditingController countryCode = TextEditingController();
#override
void initState() {
// TODO: implement initState
countryCode.text = '+91';
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Verify Number',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
body: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/otpimage.png',
height: 150,
width: 150,
),
Text(
'Phone Verification',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Text('Please enter your mobile number to get started'),
SizedBox(
height: 25,
),
Container(
height: 55,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.grey),
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 10,
),
SizedBox(
width: 40,
child: TextField(
controller: countryCode,
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
Text(
"|",
style: TextStyle(fontSize: 33, color: Colors.grey),
),
SizedBox(
width: 10,
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone",
),
),
),
],
),
),
SizedBox(
height: 20,
),
SizedBox(
width: double.infinity,
height: 45,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade600,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: Text('Send Code'),
onPressed: () {
Navigator.pushNamed(context, 'verify');
},
),
),
],
),
),
),
);
}
}
Basically i need the output in the following way
The output of this code is:
You can include padding on the scaffold body. while you are using Container widget, you can use padding of it.
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16), //this
child: SingleChildScrollView(
child: Column(
Wrap your Row and ElevatedButton inside Padding
Padding(
padding: EdgeInsets.only(horizontal:16.0),
child: Row(...),
),
Padding(
padding: EdgeInsets.only(horizontal:16.0),
child:ElevatedButton(...)
)
Use Padding Widget :
Padding(
padding: const EdgeInsets.all(8.0),
child: "YOUR WIDGET",
),
Add Padding to Your Container or SingleChildScrollView like below
Container(
// padding: EdgeInsets.all(16), or use this
alignment: Alignment.center,
child: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(),
),
),
Your Result->
Simply Wrap your Row and ElevatedButton inside a Padding.

Renderflex overflowed error, also when i wrap column with SingleChildScrollView or ListView my UI disappered

I am creating a Login page, when i click on text field due to overlapping keyboard i got error......................................................................................................
Renderflex overflowed error, also when i wrap column with SingleChildScrollView or ListView my UI disappered. new to flutter lagging in concept , plz help.
import 'package:flutter/material.dart';
import 'package:flutter_chat_application_1/modals/customtheme.dart';
import 'package:flutter_chat_application_1/widgets/customappbar.dart';
import 'package:flutter_chat_application_1/widgets/widget.dart';
class SignIn extends StatefulWidget {
const SignIn({Key? key}) : super(key: key);
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignIn> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: [
Spacer(),
Form(
child: Column(
children: [
TextFormField(
style: myTextStyle(),
decoration: textFieldInputDecoration('email')),
TextFormField(
style: myTextStyle(),
decoration: textFieldInputDecoration('password'),
)
],
),
),
SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding:
EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: TextButton(
onPressed: () {},
child: Text(
'Forgot Password?',
style: myTextStyle(),
),
))
],
),
SizedBox(
height: 16,
),
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(
colors: [Color(0xff007EF4), Color(0xff2A75BC)])),
width: MediaQuery.of(context).size.width,
child: Text(
'Sign In',
style: biggerTextStyle(),
textAlign: TextAlign.center,
),
),
),
SizedBox(
height: 16,
),
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.symmetric(vertical: 16),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: Text(
'Sign in with Google',
style:
TextStyle(fontSize: 17, color: CustomTheme.textColor),
textAlign: TextAlign.center,
),
),
),
SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Don\'t have account?',
style: myTextStyle(),
),
TextButton(
onPressed: () {},
child: Text('Register Now',
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.white,
fontSize: 16,
)))
],
),
SizedBox(
height: 10,
)
],
)));
}
}

Make Flutter Container Responsive

I am trying to make an app and I have used a container and a column widget under a stack widget but the width of the container and the positioned widget of a column widget are not updating according to the screen sizes.
Screenshot:
Please check the demo code given below and re-edit the code. Thank you.
code
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Center(
child: Container(
height: 135,
width: width,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
child: Container(
width: width * 0.6,
height: 110,
child: const Text(
'product.name',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
),
Positioned(
top: 80,
left: width * 0.85,
child: Column(
children: const [
Text(
'Rs200',
style:
TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
)),
);
}
}
You should try this :
Container(
margin: EdgeInsets.all(16.0),
height: 135,
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(50, 15, 5, 0),
child: Container(
height: 110,
child: const Text(
'product.name',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
),
Positioned(
top: 80,
right: 20,
child: Column(
children: const [
Text(
'Rs200',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
),
),
And your screen look like this -
There is no need to use of any Stack. I think you can do things using the row and column widget, check out the example that i have added below let me know if it work.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 135,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(
children: <Widget>[
Image.network(
'https://images3.alphacoders.com/823/82317.jpg',
fit: BoxFit.cover,
height: 120,
width: 120,
),
],
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 5, 0),
child: const Text(
'asdfnweoriwqer qweroiqwoer qweruqwoer sadfsdf dfsdf ',
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 17),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Rs200',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
],
),
),
],
),
],
),
),
],
)),
),
);
}
}
Layout Explanation:
There will be one row which will have two items 1) image and another will be a column.
Now the Column will have expanded widget to get max width.
Column childern will have two row widget one product name and another price row which will have Column as widget for text.
we have used row to take the max width.
For the Text to expand accordingly you have to add the expanded widget inside the row widget so that it scales based on the text that is coming.
Note : Please add padding according to your need.
Let me know if it works.
First of all, you have used so many redundant widgets which do not serve any purpose except making the code look ugly and complex. I have refactored the code and have used the least number of widgets while fulfilling your requirement:
Demo on the action: https://dartpad.dev/?null_safety=true&id=75d503fcbe2bdb0e8b37ff21fc284a30
Gist link: https://gist.github.com/omishah/75d503fcbe2bdb0e8b37ff21fc284a30 ( Do give star if this works for you. :) )
I have made the image also responsive which you can remove if you don't want to have it.
Complete code:
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: IntrinsicHeight(
child: Container(
margin: EdgeInsets.all(
8.0), // just to make the contianer stand out, you can remove it
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
fit: BoxFit.cover,
height:
width * 0.25, // 25% of screen width
width: width * 0.25,
),
),
SizedBox(width: 15),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'product.name',
style: TextStyle(fontSize: 17),
),
Align(
alignment: Alignment.centerRight,
child: Wrap(direction: Axis.vertical, children: [
Text(
'Rs200',
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
Text(
'Rs300',
style: TextStyle(
decoration: TextDecoration.lineThrough,
fontSize: 17,
color: Colors.blueGrey),
),
]))
])),
],
),
)));
}
}

How to avoid overflow by using SingleChildScrollView

I am very new with flutter and im very stuck in a positioning.
Does anybody know where should I place the "SingleChildScrollView"? I get stack overflow 148PX.
my code looks like this,i tried in all the posible ways, but i still didnt managed how to fix it.
I can't understand where should i put the body :
class SignUp extends StatefulWidget {
#override
_SignUpState createState() => _SignUpState();
}
class _SignUpState extends State<SignUp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
alignment: Alignment.bottomCenter,
width: 400,
height: 350,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/images/qlogo1.png'))),
),
SizedBox(height: 1),
Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
children: [
TextField(
style: mediumTextStyle(),
decoration: textFieldInputDecoration('username'),
),
TextField(
style: mediumTextStyle(),
decoration: textFieldInputDecoration('password'),
),
],
),
),
SizedBox(
height: 25,
),
// creaza spatii intre containere
Container(
alignment: Alignment.centerRight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 37, vertical: 8),
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Quicksand',
decoration: TextDecoration.underline),
)),
),
SizedBox(height: 24),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 70,
padding: EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),
borderRadius: BorderRadius.circular(30),
),
child: Text(
'Sign In',
style: mediumTextStyle(),
),
),
SizedBox(
height: 16,
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 70,
padding: EdgeInsets.symmetric(vertical: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: Text('Register',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Quicksand',
fontSize: 17)),
),
],
),
);
}
}
Thank you!
If you want all you screen to be scrolled - do this:
return Scaffold(
body: SingleChildScrollView(
child: Column(
// your other code
)
)
);

handling application layout in flutter app

I have Entry page to my app like below, I am getting bottom overflow , image size issue , text font issue, when I run on the phone with less than 5 inches,
If I run the same app on over 5 inches I am getting like below
Can anyone who have worked on developing flutter apps help me on how I can adjust according to the screen?
also How to adjust text size, image size every other things as per the screen size?
below is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Color colorTheme;
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => new _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
TextEditingController controllerEmail = TextEditingController();
TextEditingController controllerPassword = TextEditingController();
String username, password;
Widget loginButtonChild = const Text(
"Log in",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, fontFamily: "OpenSans-Regular", fontSize: 16),
);
Widget loginButtonWithCircle = Row(
children: <Widget>[
const Text(
"Log in",
style: TextStyle(
color: Colors.white,
fontFamily: "OpenSans-Regular",
),
),
CircularProgressIndicator(),
],
);
#override
Widget build(context) {
double maxHeight = MediaQuery.of(context).size.height;
// ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
return Scaffold(
resizeToAvoidBottomPadding: true,
body: SingleChildScrollView(
child: LimitedBox(
maxHeight: maxHeight * 1,
child: Stack(
//fit: StackFit.expand,
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.05,
left: MediaQuery.of(context).size.width * 0.05),
child: Image.asset('assets/Heat Map.png',
width: 100, height: 20, fit: BoxFit.fill),
)
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(15))),
padding: EdgeInsets.all(
// MediaQuery.of(context).size.width * 0.09,
MediaQuery.of(context).size.width * 0.1,
),
child: Image.asset(
'assets/layer_1_3.png',
// color: Color(0xFFe31735),
// width: 300,
width: MediaQuery.of(context).size.width * 0.72,
// height: 300,
height: MediaQuery.of(context).size.height * 0.5,
fit: BoxFit.contain,
),
),
Positioned(
left: 78.0,
bottom: 10.0,
child: RichText(
text: TextSpan(
text: 'APP',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '\nDevelopment',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
TextSpan(
text: '\nFlutter',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.normal,
),
),
],
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
],
),
SingleChildScrollView(
child: new Container(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 40.0, 40.0),
child: new Form(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Icon(Icons.person_outline,
size: 38, color: Colors.black),
),
SizedBox(width: 10.0),
new Expanded(
child: new TextFormField(
style: TextStyle(color: Colors.black),
controller: controllerEmail,
//cursorColor: , make it yellow later TODO
decoration: new InputDecoration(
labelText: "Username",
enabledBorder: new UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red,
))),
keyboardType: TextInputType.text,
),
),
],
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Icon(
Icons.lock_outline,
size: 38,
color: Colors.black,
),
),
SizedBox(width: 10.0),
new Expanded(
child: new TextFormField(
controller: controllerPassword,
style: TextStyle(color: Colors.red),
decoration: new InputDecoration(
labelText: "Password",
enabledBorder: new UnderlineInputBorder(
borderSide: new BorderSide(
color: Colors.red,
))),
obscureText: true,
keyboardType: TextInputType.text,
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {
},
child: Text(
"Forgot password?",
style: TextStyle(
color: Colors.grey,
fontFamily: "OpenSans-Regular",
),
),
)
],
),
),
SizedBox(
height: MediaQuery.of(context).size.width * 0.04,
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(25.0),
side: BorderSide(color: Colors.red)),
color: Colors.red,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 48),
child: loginButtonChild,
),
const SizedBox(
width: 45.0,
height: 45.0,
),
Icon(Icons.arrow_forward,
color: Colors.white),
],
),
onPressed: () {
}),
],
),
),
),
),
],
),
],
),
),
),
);
}
}
You can use SingleChildScrollView to avoid overflow error just wrap your widget with SingleChildScrollView
Example:-
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child:YourWidget();
)
)