Develop Reference

How to add vertical spacing to widgets Flutter

I have a piece of code here which makes up the body of the login and register screens. Everything is in the position i want but i would like to space them out a little. The two input fields, title, subtitle, button and textbutton are too close together vertically.
I tried to use mainaxisalignment.spacebetween but i get a constraint error and everything i have on the screen disappears afterwards except the background.
The body used by the register and login screen:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
),
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/bottomleft.png'),
alignment: Alignment.bottomLeft,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topRight,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/topbig.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeat),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatX),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Align(
alignment: Alignment.center,
child: SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
),
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style: TextStyle(
color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"OR SIGN IN WITH",
style: TextStyle(color: kcMediumGreyColor),
),
],
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
],
),
),
);
}
}
the login screen:
Widget build(BuildContext context) {
return ViewModelBuilder<LoginScreenModel>.reactive(
builder: (context, model, child) => Scaffold(
body: AuthenticationLayout(
busy: model.isBusy,
onCreateAccountTapped: () {},
//validationMessage: model.validationMessage,
title: 'SIGN IN',
subtitle: 'please fill the form below',
mainButtonTitle: 'SIGN IN',
form: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Username',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
),
],
),
onForgotPassword: () {},
),
),
viewModelBuilder: () => LoginScreenModel(),
);
}
}

Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),

You should Add SizedBox() in between two Widgets, or Set Padding to your widgets or you use Container also like below:
Using SizedBox()
Column(
children:[
Widget 1(),
SizedBox(height:10),
Widget 2(),
SizedBox(height:10),
Widget 3(),
],
),
Using Padding()
Column(
children:[
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
Using Container()
Column(
children:[
Container(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
You should use padding on your choice like:
EdgeInsets.all(8.0),
EdgeInsets.only(left:8.0,top:8.0,right:8.0,bottom:8.0),
EdgeInsets.symmetric(vertical: 8.0,horizontal:8.0),

You may add some SizedBox() between or set margin to the components.

Use SizedBox widget to add vertical spacing to your widget.
For e.g
SizedBox(height: 16),

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

I am new to Flutter I have the following activity, when I click in Text Field Keyboard appears and then the warning e.g. BOTTOM OVERFLOWED BY 84 PIXLES also appears how can i be able to resolve this issue? when I tried SingleChildScrollView then empty area("where there is no Widgets") of activity gone white. Is there any Widget that is missing or i made a mistake in my code?
My Activity
here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(16),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget cardnumber() {
return TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'XXXX XXXX XXXX 1234',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}

using a SingleChildScrollView is the right way to go.
in order to fix the issue you talked about, delete the color attribute from the container, and move it to the scaffold background color attribute:
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
// the rest of the widgets...
),
),
);

Simply add resizeToAvoidBottomInset: false to your Scaffold

Also you can wrap the child inside SingleChildScrollView

Use SingleChildScrollView in body. To avoid white portion problem wrap it inside a Stack.
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(16),
color: Colors.black,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
)
],
)

How to achieve this layout with same color scheme in Flutter?

I want to develop the Following design in Flutter, I am using Flutter default colors, the I am facing is that when I use Container having color is black and then want to place some Widgets inside of that container having Lighter color than Black as you can in Following image are not visible how to resolve this?
Here is some Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(12),
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Card(
color: Colors.blueGrey,
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Card(
color: Colors.blueGrey,
child: emailField(),
),
//
// Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// children: <Widget>[
// Card(
// child: Exp_Date(),
// ),
// Card(
// child: CVV(),
// )
// ],
// ),
TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
// Exp_Date(),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget emailField() {
return TextFormField(
//obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "Card Number",
hintText: 'xxxx xxxx 1234',
),
);
}
Widget Exp_Date() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
// labelText: "Exp Date",
hintText: "MM/YY",
),
);
}
Widget CVV() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "CVV",
hintText: "CVV",
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}
Note
I don't have any issues with BottomNavigationBar

Use Color(0xFF1E1E1E) instead of Colors.blueGrey.

Keep widget below the statusbar

is there a way to make sure that a widget keeps underneath the quick menu on android.
At the moment I do it in a kind of dirty way with a padding parameter, I hope there is a better solution.
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 22.0),
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildHeader(),
Padding(
padding: const EdgeInsets.only(left: 40.0, right: 40.0),
child: TextField(
// cursorColor: Colors.red,
maxLines: null,
textAlign: TextAlign.left,
autofocus: false,
style: TextStyle(
fontSize: 20.0,
),
decoration: InputDecoration(
hintText: "Add title",
border: InputBorder.none,
),
),
),
Divider(
color: Colors.black,
),
SizedBox(
height: 20.0,
),
TimeAndDateCard(),
EventEntryCard(
label: 'Add Location',
icon: Icon(Icons.place),
onLongPress: () {
showSearch(delegate: LocationSearch(), context: context);
},
),
EventEntryCard(
icon: Icon(Icons.people),
label: 'Invite people ',
),
EventEntryCard(
icon: Icon(Icons.attachment),
label: 'Add attachment',
),
EventEntryCard(
icon: Icon(Icons.work),
label: 'Status',
),
],
),
),
);
}
}
layout without padding
Wished layout. Container is underneath the statusbar

Wrap your Container with SafeArea and it will do the magic for you..
Widget build(BuildContext context) {
return SafeArea(
child: Container(),
);
}
Hope it answers your question..

Flutter overflow bottom when keyboard appears

i got this error and i cant get why, in a new screen i got a simple form on top (start of the column), when i focus the textfield the keyboard appears and overflow the date select and the button, but i dont know why.
Here is the initial state whiout focus on the textfield
and here is when i focus the textfield.
This is the widget i got to do this.
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
TopBarWidget(page: 'New Event', title: 'Nuevo Evento'),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
onChanged: (value) {
eDisplayName = value;
},
maxLength: 18,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
cursorColor: Color(0xFFFC4A1A),
decoration: InputDecoration(
labelText: "Nombre del Evento",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
),
),
),
SizedBox(
height: 16.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
OutlineButton(
focusColor: Theme.of(context).primaryColor,
highlightedBorderColor: Theme.of(context).primaryColor,
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
textColor: Theme.of(context).primaryColor,
onPressed: () => _selectDate(context),
child: Text('Cambiar Fecha'),
),
Text(
"${formatedDate(selectedDate.toLocal())}",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Theme.of(context).primaryColor),
),
// Text("${selectedDate.toLocal()}"),
],
),
SizedBox(
height: 16.0,
),
RaisedButton(
disabledColor: Colors.grey[200],
disabledTextColor: Colors.black,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0)),
onPressed: eDisplayName.length == 0
? null
: () {
// print(newEvent);
Navigator.pop(context);
},
child: Text(
'ACEPTAR',
// style: TextStyle(fontSize: 20),
),
),
],
),
),
],
)),
);

Yo can set to false the resizeToAvoidBottomInset in your Scaffold()
Like this
return Scaffold(
resizeToAvoidBottomInset: false,
body: // ...
// ...
)
Documentation reference: Scaffold - resizeToAvoidBottomInset

It's beginner level problem. Don't know why most tutorial don't cover this problem before showing TextField Widget.
Column widget is fixed and does not scroll. So change Column to ListView. And do nothing else. The Widget will gain scroll feature and overflow problem will not happen anymore.