Flutter layout

Container, Row and Column

‫سعاد محمد عثمان‬.‫ا‬
 The following widgets fall into two categories: standard widgets from the widgets library,
and specialized widgets from the Material library. Any app can use the widgets library but
only Material apps can use the Material Components library.
 Standard widgets:
 Container: Adds padding, margins, borders, background color, or other decorations to a widget.
 GridView: Lays widgets out as a scrollable grid.
 ListView: Lays widgets out as a scrollable list.
 Stack: Overlaps a widget on top of another.
 Material widgets:
 Card: Organizes related info into a box with rounded corners and a drop shadow.
 ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.
Types of layout widgets

 Here are the most frequently used layout widgets and their purposes:
 a. Single-child Layout Widgets
 These widgets contain only one child.
 Container: Adds padding, margins, borders, or background colors to a child widget.
 Center: Centers a single child within the available space.
 Padding: Adds padding around a child.
 Align: Aligns a child within its parent (e.g., top-left, center, etc.).
 b. Multi-child Layout Widgets
 These widgets can contain multiple children.
 Row: Arranges children horizontally.
 Column: Arranges children vertically.
 Stack: Overlays children on top of each other (like layers).
 ListView: Creates a scrollable list of children.
 GridView: Creates a grid layout.
Container
 The container in Flutter is a parent widget that can contain multiple child widgets and
manage them efficiently through width, height, padding, background color, etc. It is a
widget that combines common painting, positioning, and sizing of the child widgets. It is
also a class to store one or more widgets and position them on the screen according to
our needs. Generally, it is similar to a box for storing contents. It allows many attributes
to the user for decorating its child widgets, such as using margin, which separates the
container with other contents.
Container
 A container widget is same as <div> tag in html. If this widget does not contain any

child widget, it will fill the whole area on the screen automatically. Otherwise, it will

wrap the child widget according to the specified height & width. It is to note that this

widget cannot render directly without any parent widget. We can use Scaffold widget,

Center widget, Padding widget, Row widget, or Column widget as its parent widget.
Why a container widget in
Flutter?
 If we have a widget that needs some background styling may be a color, shape, or size

constraints, we may try to wrap it in a container widget. This widget helps us to

compose, decorate, and position its child widgets. If we wrap our widgets in a

container, then without using any parameters, we would not notice any difference in its

appearance. But if we add any properties such as color, margin, padding, etc. in a

container, we can style our widgets on the screen according to our needs.
Constructors of the container class

 The following are the syntax of container class constructor:

Container({Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
double width,
double height,
Decoration decoration,
Decoration foregroundDecoration,
BoxConstraints constraints,
Widget child,
Clip clipBehavior: Clip.none
});
Properties of Container widget
 1. child: This property is used to store the child widget of the
container.
Container(
child: Text("Hello! I am in the container widget",
style: TextStyle(fontSize: 25)),
)

 2. color: This property is used to set the background color of the

text. Container(
color: Colors.green,
child: Text("Hello! I am in the container widget",
style: TextStyle(fontSize: 25)),
)
Properties of Container widget

 3. height and width: This property is used to set the container's

height and width according to our needs. By default, the container
always takes the space based on its child widget.
Container(
width: 200.0,
height: 100.0,
color: Colors.green,
child: Text("Hello! I am in the container widget", style: TextStyle(fo
ntSize: 25)),
)
 4. margin: This property is used to surround the empty space

around the container.

margin: EdgeInsets.all(20),
 5. padding: This property is used to set the distance between the border of the container (all four
directions) and its child widget.

 6. alignment: This property is used to set the position of the child within the container. Flutter allows
the user to align its element in various ways such as center, bottom, bottom center, topLeft, centerRight,
left, right, and many more.

 7. decoration: This property allows the developer to add decoration on the

widget. It decorates or paint the widget behind the child. The decoration property supported
many parameters, such as color, gradient, background image, border, shadow, etc. It is to make sure
that we can either use the color property in a container or decoration, but
not in both.
 Example
body: Container(
import 'package:flutter/material.dart'; padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
void main() => runApp(MyApp()); decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 4),
/// This Widget is the main application wid borderRadius: BorderRadius.circular(8),
get. boxShadow: [
class MyApp extends StatelessWidget { new BoxShadow(color: Colors.green),
],
),
@override child: Text("Hello! I am in the container widget decorati
Widget build(BuildContext context) { on box!!",
return MaterialApp( style: TextStyle(fontSize: 30)),
home: Scaffold( ),
appBar: AppBar( ),
title: Text("Flutter Container Exampl );
e"), }
), }
 8. transform: The transform property allows developers to rotate the
container.
 9. constraints: This property is used when we want to add additional
constraints to the child. It contains various constructors, such as tight,
expand, etc.
 tight: If we use size property in this, it will give fixed value to the child.
 expand: Here, we can choose the height, width, or both values to the child.

Container(
color: Colors.green,
constraints: BoxConstraints.expand(height: 60.0),
child: Text("Hello! I am in the container widget", style: TextStyle(fon
tSize: 25)),
)
 class MyContainerWidget extends StatelessWidge
Example t{
@override
Widget build(BuildContext context) {
import 'package:flutter/material.dart'; return MaterialApp(
home: Scaffold(
void main() => runApp(MyApp()); appBar: AppBar(
title: Text("Flutter Container Example"),
/// This Widget is the main application wi ),
dget. body: Container(
class MyApp extends StatelessWidget { width: double.infinity,
height: 150.0,
color: Colors.green,
@override margin: EdgeInsets.all(25),
Widget build(BuildContext context) { padding: EdgeInsets.all(35),
return MaterialApp( alignment: Alignment.center,
home: MyContainerWidget(), transform: Matrix4.rotationZ(0.1),
); child: Text("Hello! I am in the container widg
} et!!",
} style: TextStyle(fontSize: 25)),
),
),
);
Flutter Row and Column
Rows and columns
 Rows and columns are not a single widget; they are two different widgets, namely
Row and Column. Row and column are the two essential widgets in Flutter that allows
developers to align children horizontally and vertically according to our needs.
These widgets are very necessary when we design the application user interface in
Flutter.

1. Row and Column widgets are the most commonly used layout patterns in the Flutter
application.

2. Both may take several child widgets.

3. A child widget can also be a row or column widget.

4. We can stretch or constrain a particular children's widget.

5. Flutter also allows developers to specify how child widgets can use row and column
widgets' available space.
Row Widget
 This widget arranges its children in a horizontal direction on the screen. In other
words, it will expect child widgets in a horizontal array. If the child widgets need to fill the
available horizontal space, we must wrap the children widgets in an Expanded widget.

 A row widget does not appear scrollable because it displays the widgets within the visible
view. So it is considered wrong if we have more children in a row which will not fit in the
available space. If we want to make a scrollable list of row widgets, we need to use the
ListView widget.
Row properties
 We can align the row's children widget with the help of the following properties:

• start: It will place the children from the starting of the main axis.

• end: It will place the children at the end of the main axis.

• center: It will place the children in the middle of the main axis.

• spaceBetween: It will place the free space between the children evenly.

• spaceAround: It will place the free space between the children evenly and half of that space
before and after the first and last children widget.

• spaceEvenly: It will place the free space between the children evenly and before and after the
first and last children widget.
import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageSta
te();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Row Example"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,f
ontSize:25),),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,font
Size:25),),
),
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,font
Size:25),),
)
]
),
);
Column
 This widget arranges its children in a vertical direction on the screen. In other
words, it will expect a vertical array of children widgets. If the child widgets need to
fill the available vertical space, we must wrap the children widgets in an Expanded
widget.
import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Column Example"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.red
),
child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
)
]
),
);
}
}
TextField
TextField
 A TextField or TextBox is an input element which holds the alphanumeric data,
such as name, password, address, etc. It is a GUI control element that enables
the user to enter text information using a programmable code. It can be of a
single-line text field (when only one line of information is required) or multiple-
line text field (when more than one line of information is required).

 TextField in Flutter is the most commonly used text input widget that allows
users to collect inputs from the keyboard into an app.

 We can add several attributes with TextField, such as label, icon, inline hint text,
and error text using an InputDecoration as the decoration. If we want to remove
the decoration properties entirely, it is required to set the decoration to null.
TextField (
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Enter Name',
hintText: 'Enter Your Name'
),
);
• decoration: It is used to show the decoration around TextField.

• border: It is used to create a default rounded rectangle border around TextField.

• labelText: It is used to show the label text on the selection of TextField.

• hintText: It is used to show the hint text inside TextField.

• icon: It is used to add icons directly to the TextField.

Example
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {

@override
_State createState() => _State();
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) { Padding(
return Scaffold( padding: EdgeInsets.all(15),
appBar: AppBar( child: TextField(
title: Text('Flutter TextField Example'), obscureText: true,
), decoration: InputDecoration(
body: Padding( border: OutlineInputBorder(),
padding: EdgeInsets.all(15), labelText: 'Password',
child: Column( hintText: 'Enter Password',
children: <Widget>[ ),
Padding( ),
padding: EdgeInsets.all(15), ),
child: TextField( ],
decoration: InputDecoration( )
border: OutlineInputBorder(), )
labelText: 'User Name', );
hintText: 'Enter Your Name', }
), }
),
),
Retrieve the value of a TextField

 Flutter allows the user to retrieve the text in mainly two ways: First is the
onChanged method, and another is the controller method. Both are discussed
below:
 1. onChanged method: It is the easiest way to retrieve the text field value. This
method store the current value in a simple variable and then use it in the TextField
widget.
String value = "";
TextField(
onChanged: (text) {
value = text;
},
)
 2. Controller method: It is a popular method to retrieve text field
value using TextEditingController. It will be attached to the
TextField widget and then listen to change and control the widget's
text value.
1. Create a TextEditingController.
2. Attach the TextEditingController to a TextField using controller property.
3. Retrieve the value of the TextField by using the text() method provided by
the TextEditingController.
TextEditingController mycontroller = TextEditingCo
ntroller();
TextField(
controller: mycontroller,
)
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {

@override
_State createState() => _State();
}

class _State extends State<MyApp> {

TextEditingController nameController = TextEditingController()
;
TextEditingController passwordController = TextEditingControl
ler();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
), Padding(
body: Padding( padding: EdgeInsets.all(15),
padding: EdgeInsets.all(15), child: TextField(
child: Column( controller: passwordController,
children: <Widget>[ obscureText: true,
Padding( decoration: InputDecoration(
padding: EdgeInsets.all(15), border: OutlineInputBorder(),
child: TextField( labelText: 'Password',
controller: nameController, hintText: 'Enter Password',
decoration: InputDecoration( ),
border: OutlineInputBorder(), ),
labelText: 'User Name', ),
hintText: 'Enter Your Name',
),
),
),
 actions: <Widget>[
RaisedButton( new FlatButton(
textColor: Colors.white, child: new Text('OK'),
color: Colors.blue, onPressed: () {
child: Text('Sign In'), Navigator.of(context)
onPressed: (){ .pop();
return showDialog( },
context: context, )
builder: (context) { ],
return AlertDialog( );
title: Text("Alert Message"), },
// Retrieve the text which the user has entered by );
// using the TextEditingController. },
content: Text(nameController.text), )
],
)
)
);
}
}