Getting started with Container, AppBar, Stack, Row, Column in Flutter.
Everything in Flutter is a widget. A developer can create an attractive application easier and faster by using a huge collection of flutter widgets.
Here we will get to know about some of the important widgets which a developer must know before developing a project in Flutter.
Container
The container is a convenience widget that combines common painting, positioning, and sizing widgets. This widget is mainly used for containing child widgets to add different properties to it.
Container(
color: Colors.black54,
width: 200.0,
height: 200.0,
),
In the above example, we have created a simple container with color black24(grey), height and width 200.
Properties of Container:
Child:
This property of the container defines the child of the container. We can use this to add a child to a container. A child can be anyone from many widgets like Column, Row, Text, Container, Center, Stack, etc.
Container(
color: Colors.yellow,
width: 200.0,
height: 200.0,
child: Text('I am a Container')
),
Alignment:
This property is used to set the position of the child in the Container. The alignment of a child can be done at the center, left, right, top, bottom. top-left, bottom-right, top-right, bottom-left or user can also assign the coordinates of the position.
Container(
color: Colors.yellow,Properties of Column:
width: 200.0,
height: 200.0,
alignment: Alignment.center,
child: Text('I am a Container')
),this will align the child at the center.
Container(
color: Colors.yellow,
width: 200.0,
height: 200.0,
alignment: Alignment.topRight,
child: Text('I am a Container', style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),)
),while this will align the text at the top-right corner of the container.
You can also assign custom coordinates to set the position of the child.
Container(
color: Colors.yellow,
width: 200.0,
height: 200.0,
alignment: Alignment(0.9, 0.75),
child: Text('I am a Container')
),
Padding:
Padding is another property of container which allows user to create padding between child and container. Padding helps a child in maintaining some distance with the borders of the container. Padding can be applied to all edges or can be applied to only some particular edges.
Container(
color: Colors.yellow,
width: 200.0,
height: 200.0,
padding: EdgeInsets.all(20),
child: Container(
color: Colors.lightBlueAccent,
)
)the above example will create padding at all edges.
Container(
color: Colors.yellow,
width: 200.0,
height: 200.0,
padding: EdgeInsets.only(top: 20,right: 20,bottom:0 ,left:0),
child: Container(
color: Colors.lightBlueAccent,
)
)and this example will create padding according to the given parameters.
Decoration:
The decoration is basically used to decorate the container with various properties like color, border-radius, border, etc.
Container(width: 200.0,
height: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
color: Colors.green,
width: 10.0
)
),
)
AppBar
AppBar is a property of Scaffold. AppBar is used to display the toolbar and other widgets at the top of an application. AppBar is placed at the top of the application.
Scaffold(
appBar: AppBar(
title:Text('Scaffold AppBar Demo'),
),
),
Properties of AppBar:
Title:
In the title of the AppBar, you can place the name of the application or something related to it. The title takes Text class as its value.
Scaffold(
appBar: AppBar(
title:Text('This is my Application'),
),
)
Actions:
Action property in AppBar is used to assign Icons or Text at the right of the AppBar i.e top-right of the screen. This is the best place to add utility.
Scaffold(
appBar: AppBar(
title:Text('AppBar Action Demo'),
actions: <Widget>[
Icon(Icons.favorite),
Icon(Icons.print),
],
),
)
Background Color:
In Flutter, you can also change the background color of the AppBar. AppBar allows users to choose any color from a huge collection of colors in the flutter. Users can also add custom colors by adding their color code.
Scaffold(
appBar: AppBar(
title:Text('AppBar Color Demo'),
actions: <Widget>[
Icon(Icons.favorite),
Icon(Icons.print),
],
backgroundColor: Colors.green,
),
)
Elevation:
The elevation property of AppBar allows users to elevate the AppBar, i.e. increasing the size of the z-axis. It provides a shadow effect to the AppBar.
Scaffold(
appBar: AppBar(
title:Text('AppBar Elevation Demo'),
actions: <Widget>[
Icon(Icons.favorite),
Icon(Icons.print),
],
backgroundColor: Colors.green,
elevation : 60.0,
),
)
Leading:
This property of AppBar allows users to add a widget on the left side of the AppBar, i.e. the top-left corner of the screen. Mostly it is used to add drawers in the application.
Scaffold(
appBar: AppBar(
title:Text('AppBar Leading Demo'),
actions: <Widget>[
Icon(Icons.favorite),
Icon(Icons.print),
],
backgroundColor: Colors.green,
elevation: 60.0,
leading: Icon(Icons.menu),
),
)
Brightness:
Brightness property in AppBar is used to set the brightness of the status bar. Users can set it to Light or Dark according to the UI environment.
Scaffold(
appBar: AppBar(
title:Text('AppBar Leading Demo'),
actions: <Widget>[
Icon(Icons.favorite),
Icon(Icons.print),
],
backgroundColor: Colors.green,
elevation: 60.0,
leading: Icon(Icons.menu),
brightness: Brightness.dark,
),
)
Column
The column is a widget used to display children widgets in a vertical direction. The main axis of the column is Y-axis, that’s why all the children in the column are placed vertically. Children of a column can contain various widgets like container, row, text, etc.
Column(
children: <Widget>[
Text('Children 1'),
Text('Children 2'),
Text('Children 3'),
Text('Children 4'),
Text('Children 5'),
Text('Children 6'),
Text('Children 7'),
Text('Children 8'),
],
),
Properties of Column:
Main Axis Alignment:
This property of a column allows users to align elements vertically. It is used to align data at the top(start), bottom(end), center and even it is also used for spacing between elements as space evenly, space between. The alignment of the column is by default set to top(start).
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Children 1'),
Text('Children 2'),
Text('Children 3'),
Text('Children 4'),
Text('Children 5'),
Text('Children 6'),
Text('Children 7'),
Text('Children 8'),
],
),mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
The above example is for Start, End, Center classes of Main Axis Alignment.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spaceEvenly creates equal space between elements taking care of both top and bottom,
while spaceBetween creates equal space between elements but sticks the first and last element with top and bottom.
Cross Axis Alignment:
As the main axis of the column is Y-axis, so the cross axis of the column will be X-axis. This property works the same as Main Axis alignment but computes on X-axis.
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.spaceBetween,
Row
The row is a widget used to display children widgets in a horizontal direction. The main axis of the column is X-axis, that’s why all the children in the column are placed horizontally. Children of a row can contain various widgets like container, row, column, text, etc.
Properties of Row:
Main Axis Alignment:
This property of a row allows users to align elements horizontally. It is used to align data at the left(start), right(end), center and even it is also used for spacing between elements as space evenly, space between. The alignment of the row is by default set to the left(start).
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Children 1'),
Text('Children 2'),
Text('Children 3'),
],
),mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
The above example is for Start, End, Center classes of Main Axis Alignment.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spaceEvenly creates equal space between elements taking care of both left and right,
while spaceBetween creates equal space between elements but sticks the first and last element with left and right.
Cross Axis Alignment:
As the main axis of the row is X-axis, so the cross axis of the row will be Y-axis. This property works the same as Main Axis alignment but computes on Y-axis.
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.spaceBetween,
Stack
The stack is a widget that is used to implement stack architecture in Flutter. Stack architecture specifies that the first widget put in the stack will be at the bottom and the other widgets will overlay to it. The stack is basically used where a user has to place a widget over multiple widgets.
Stack(
children: <Widget>[
BottomWidget(),
MiddleWidget(),
TopWidget(),
],
),
Stack(
children: <Widget>[
Container(
color: Colors.green,
),
Container(
color: Colors.pink,
height: 450.0,
width: 300.0,
),
Container(
color: Colors.blue,
height: 300.0,
width: 150.0,
)
],
),
Stack(
children: <Widget>[
Container(
color: Colors.yellow,
),
Container(
color: Colors.pink,
height: 350.0,
width: 300.0,
),
Positioned(
right: 60.0,
top: 60.0,
child: Container(
color: Colors.blue,
height: 200.0,
width: 200.0,
),
)
],
),
Goodbye
Thanks for reading. If you found this helpful, please share it with your friends.
For more updates about programing in Flutter follow Satyam Sangal, so you will get notified when we write new posts.
Did I get something wrong? Mention it in the comments. I would love to improve.
If you liked what you read, please leave some claps!
To know more about me, visit :
https://about.me/satyamsangal/
Follow FlutterFly :
LinkedIn : https://www.linkedin.com/in/flutterfly-5726b6189/
LinkedIn Group : https://www.linkedin.com/groups/10482289/
Facebook : https://www.facebook.com/flutterflytech/
Twitter : https://twitter.com/flutterflytech
GitHub : https://github.com/flutterflytech
Medium : https://medium.com/flutterfly-tech
