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),

Why i gonna null of the String in Flutter?

I have a problem with a simple thing but I don't how is it happening in the code.
Below is the code:
Widget build(BuildContext context) {
String newTaskTitle;
return Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
FlatButton(
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(newTaskTitle);
},
),
],
),
),
);
}
I try to get the value of the text field input and pass it to another screen but when I type something then press the button, it gives me the null.

You can also achieve this using controllers. just initialize one and specify the controller in the TextField widget. To access the text, just do _controlller.text as you can see below:
final _controller = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
),
),
TextField(
controller: _controller,
autofocus: true,
textAlign: TextAlign.center,
),
FlatButton(
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(_controller.text);
},
),
],
),
),
),
);
}

You have defined String newTaskTitle inside the build() method try removing it from inside the build method and try defining it inside the StatefulWidget.
This is happening because TextField on change method calls build() method every time the text is changed

space between divider and container in flutter

The divider is not adjusting as I need, All the stuff inside in Column Widget and not able to set vertical line.
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(child: TextFormField(
style: new TextStyle(color: Colors.grey),
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(Icons.search,color: Colors.grey,size: 30.0,),
hintStyle: TextStyle(color: Colors.grey,fontSize: 18.0),
hintText: 'Search',
),),),
IconButton(onPressed:(){},icon: Image.asset('assets/images/grid.png',fit: BoxFit.contain ,),),
Container(decoration: BoxDecoration(color: Colors.grey),width: 5.0,child: Text(''),),
IconButton(onPressed:(){},icon: Image.asset('assets/images/list.png',fit: BoxFit.contain ,),),
],
)),
Divider(color: Colors.grey,),
I need this
and getting this

Just give a height of 1 to the divider.
Divider(height: 1)
This will remove any padding it has.
Simple solution : Works Flawlessly 🎊🚀
Full code below :
ListView.separated(
itemCount: 10,
separatorBuilder: (_ , __ ) => Divider(height:1),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('item $index'),
);
},
);

Just remove divider replace with this line
Container(color: Colors.grey, height: 1)
and set Column
crossAxisAlignment: CrossAxisAlignment.stretch,

Yeah the Divider will always have padding so I just recreated what you wanted using BoxDecorations instead:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Material(
child: Column(children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TextFormField(
style: new TextStyle(color: Colors.grey),
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.grey,
size: 30.0,
),
hintStyle: TextStyle(color: Colors.grey, fontSize: 18.0),
hintText: 'Search',
),
),
),
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
],
)),
])),
);
}
Edit: reuploaded pic for clarity and removed width of borders so stays as default 1.0.

The appropriate padding is automatically computed from the height. So, setting height of divider to 0 will remove the padding.

Flutter - How to make a column screen scrollable

I'm building a flutter app with a Login Screen. On focus on the text field(s), the screen is overflowed and i cannot scroll. I've tried using a ListView.builder, but that just gives a renderBox error, and the regular ListView doesn't work
The widget structure is like this
-scafold
- body
- container
- column
- form
- column
- textInput
- textInput
- container
- container
- row
- raisedButton
Thank You in advance !!

The ListView solution should work, but at the time of writing, it suffers from the crash listed here. Another way to achieve the same thing without this crash is to use a SingleChildScrollView:
return new Container(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

try this Code: Its Using ListView
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username or Email",
),
),
SizedBox(
height: 15.0,
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Password",
),
),
SizedBox(
height: 15.0,
),
Material(
borderRadius: BorderRadius.circular(30.0),
//elevation: 5.0,
child: MaterialButton(
onPressed: () => {},
minWidth: 150.0,
height: 50.0,
color: Color(0xFF179CDF),
child: Text(
"LOGIN",
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
),
),
),
)
],
),
),
),
),
SizedBox(
height: 25.0,
),
Row(
children: <Widget>[
Expanded(child: Text("Don't Have a Account?")),
Text("Sign Up",
style: TextStyle(
color: Colors.blue,
)),
],
),
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RaisedButton(
padding: EdgeInsets.all(15.0),
onPressed: () {},
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
32.0,
),
side: BorderSide(color: Color(0xFF179CDF))),
child: Text(
"SKIP SIGN UP FOR NOW",
style:
TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
),
)),
],
),
),
);
}
}

There are two easy ways of doing it.
Wrap your Column in a SingleChildScrollView
SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)
Use ListView instead of Column.
ListView(
children: [
Text('First'),
//... other children
Text('Last'),
],
)
This approach is simple to use, but you lose features like crossAxisAlignment and other benefits provided by Column, in that case, you can wrap your children widget inside Align and set alignment property.
Now you may have nested children which are further scrollable, in that case, you need to provide a fixed height to your children, you may use SizedBox for that, that's it.
For example:
ListView(
children: [
Text('First'),
SizedBox(
height: 100,
child: ListView(...), // nested ScrollView
),
Text('Last'),
],
)

We can use the Expanded widget. It will add scrolling.
return new Expanded(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
_showChild1(),
_showChild2(),
...
_showChildN()
]
)
)
);

Wrap your column in SingleChildScrollView and then wrap SingleChildScrollView in a Center widget to center the widgets in the column.
Center(
child: SingleChildScrollView(
child: Column(
children: [
Text('First'),
//... other children
Text('Last'),
],
),
)

Icons Won't Show Up Correctly Flutter

More often than not, the icons I select to display will not show up (or will show up incorrectly) throughout my entire application. I'm not importing any new icons, all of the ones I use are selected from Flutter's default library.
On Android devices it is pretty much hit-or-miss; either all of the icons show up correctly, or they all give the same error placeholder. Like I said its much more often that they do not show.
iOS is a different story, while they still usually don't work correctly, it sometimes gives random emojis instead of the correct icon or error boxes. As you can see in the second picture, it placed a forward arrow emoji in place of what should have been the list-like icon to open the Drawer. Previously, the Close icon inside the Drawer was displaying as the strong arm emoji.
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.format_align_center),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
title: Text(
"INFORMATION",
style: TextStyle(
fontFamily: 'Titillium SemiBold',
fontSize: 37.0,
),
),
centerTitle: false,
backgroundColor: Colors.white,
elevation: 0.5,
),
drawer: Drawer(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 150.0,
color: Colors.white.withRed(191).withGreen(194).withBlue(200),
child: FittedBox(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 8.0),
child: Text(
"VITALITY PRO",
style: TextStyle(
color: Colors.white
),
),
)
)
),
SizedBox(height: 10.0),
ListTile(
title: Text(
"TERMS & CONDITIONS",
style: TextStyle(
fontSize: 18.0,
),
),
onTap: () => Navigator.pushNamed(context, '/terms'),
),
Divider(),
ListTile(
title: Text(
"PRIVACY POLICY",
style: TextStyle(
fontSize: 18.0
),
),
onTap: () => Navigator.pushNamed(context, '/privacy'),
),
Divider(),
SizedBox(height: 10.0),
ListTile(
title: Text(
"CLOSE",
style: TextStyle(
fontSize: 18.0
),
),
trailing: Icon(Icons.clear),
onTap: () => Navigator.pop(context),
),
SizedBox(height: 10.0),
Divider(),
Flexible(
fit: FlexFit.loose,
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text(
"LOGOUT",
style: TextStyle(
color: Colors.black38,
),
),
onPressed: () => Navigator.pushNamed(context, '/origin'),
),
Text("#Copyright 2018, ISPA Technology, LLC"),
],
),
),
),
],
),
),
),

That's a known issue that was fixed since.
Run
flutter upgrade
to get a newer Flutter version where this fix is included.