Layout Widgets in Flutter

Layout Widgets

The layout is a user interface design pattern that refers to defining how
the widgets are displayed on the screen relative to each other.
Flutter categories layout widgets into two types
1. Single Child Widget
2. Multi-Child Widget
 Layout Widget
Single Child Widget: The single child layout widget is a type of widget, which can have only one child
widget inside the parent layout widget.
Best Examples are Container, Padding, Center, Align, SizeBox, Baseline, Card, ListTile, etc.
Center(
child: Text(‘Welcome to Flutter Tutorial’)
),

Multiple Child Widget: The multiple child widgets are a type of widget, which contains more than
one child widget.
Best Examples are Row, Column, ListView, Expanded, Table, Flow, Stack, etc.
Row(
children: <Widget>[
Text(‘First Child of Row’),
Text(‘Second Child of Row’),
….
])
Text Widget
A Text is a widget in Flutter that allows us to display a string of text. The Text widget
constructor consists on
• textAlign: It is used to specify how our text is aligned horizontally.
• TextDirection: It is used to determine how textAlign values control the layout of our text.
Usually, we write text from left to right, but we can change it using this parameter.
• Overflow: It is used to determine when the text will not fit in the available space. It means
we have specified more text than the available space.
• TextScaleFactor: It is used to determine the scaling to the text displayed by the Text widget.
Suppose we have specified the text scale factor as 1.5, then our text will be 50 percent
larger than the specified font size.
• SoftWrap: It is used to determine whether or not to show all text widget content when
there is not enough space available. If it is true, it will show all content. Otherwise, it will
not show all content.
• MaxLines: It is used to determine the maximum number of lines displayed in the text
widget.
 Text Widget
A Text is a widget in Flutter that allows us to display a
string of text.
The most common Text widget properties consist on
• TextAlign: It is used to specify how our text is aligned horizontally. It also controls the text
location.
• TextDirection: It is used to determine how textAlign values control the layout of our text.
• MaxLines: It is used to determine the maximum number of lines displayed in the text widget.
• Style: It is the most common property of this widget that allows developers to
style their text. Styling properties are foreground, background, fontWeight,
fontSize, fontFamily, fontStyle, Color, letterSpacing, wordSpacing, shadows,
decoration.
 import 'package:flutter/material.dart';
void main() => runApp(MyApp( Scaffold(
appBar: AppBar(
title:Text("Text Widget Example")
),
body: Center(
child:Text(
"Hello World! This is a Text Widget.",
style: TextStyle(
fontSize: 35,
Example color: Colors.purple,
fontWeight: FontWeight.w700, Example
fontStyle: FontStyle.italic,
letterSpacing: 8,
wordSpacing: 20,
backgroundColor: Colors.yellow,
shadows: [
Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
]
),
)));
Button Widget
Buttons are the graphical control element, which Buttons provide a
user to trigger an event. They can be placed anywhere in our UI like
dialogs, forms, cards, toolbars, etc.
Flutter offers different types of button
• Raised / Elevated Button
• Text Button
• Outline / Outlined button
Elevated Button
Elevated Button is one of Material Design's buttons whose elevation
increases when it's being pressed. Its required parameters are required
to pass as a child with text and a callback onPressed function.
The elevated:
ElevatedButton(
Child: Text(‘Woolha.com’),
onPressed: ()
{ print(’Pressed’ ); },)

ElevatedButton.icon(
label: Text(‘Woolha.com’),
icon: Icon(Icons.web),
onPressed: ()
{ print(’Pressed’ ); },)
 Image Widget
Displaying images is the fundamental concept of most mobile apps. Flutter has an
Image widget that allows displaying different types of images in the mobile
application. You can access the image from your local directory, asset, and internet.
Asset: An asset is a file, which is bundled and deployed with the app and is accessible at runtime.
The asset can include static data, configuration files, icons, and images.
To display an image in a flutter
1. First, we need to create a new folder inside the root of the Flutter project and named it assets.
2. Next, inside this folder, add one image manually.
3. Update the pubspec.yaml file. Suppose the image name is pic1.png, then pubspec.yaml file is
assets:
- assets/pic1.png
- assets/background.png
Image Widget
Now write code inside main.dart file, where the image as widget
declares as:
body: Center(
child: Image (
image: AssetImage('assets/pic1.png'),
image: AssetImage('Images/background.png')
),),

If the image source is the Internet then:

body: Center(
child: Image (
image: NetworkImage(' https://www.picgal.com/photo/green-and-blue-peacock'),
height: 400
width: 250
),),
ICON Widget
A graphical image that can be selectable or non-selectable. It can be a
hyperlink.
Icon(
Icons.camera_front,
size: 70
color: Colors.green ),
TextField
TextField is an Input element, which is used to enter text information
TextField (
decoration: InputDecoration( //decoration around TextField
border: InputBorder.none, //default rounded rectangle border around TextField.
labelText: 'Enter Name', //show the label text on the selection of TextField.
hintText: 'Enter Your Name'
),

Retrieve TestField Values

2. Controller Method:
TextEditingController object is attached to the TextField widget and then listens to change
TextEditingController mycontroller = TextEditingController();
TextField( controller: mycontroller, )