Flutter Chapter three

Widgets

Lecturer Eng.Ayub Abshir Afrah

Topics
1 Widgets Catalog

2 Creating Widgets
Widgets
The Widgets Catalog is a valuable resource for exploring the
extensive collection of components available in Flutter. These
widgets are categorized for easy navigation and provide a
comprehensive understanding of their functionality and usage.
By becoming familiar with these widgets, you can effectively
incorporate them into your applications, ensuring efficient
development and visually appealing user interfaces.

3
4
Widgets
● Container ● Appbar
● Image ● Drawer
● Text ● PlaceHolder
● TextField ● Row Column
● Icon
● Button
● Scaffold

5
Stateless Widgets
Stateless widgets are immutable and cannot change
their state. They are ideal for representing static UI
elements, such as labels, icons, or images.

1 Simple Structure 2 Efficient Rendering

Stateless widgets are
built using the Their immutability makes
StatelessWidget class, them very efficient for
which takes a build rendering, as they only
method that returns a need to be built once.
Widget.

3 Example
A simple Text widget displaying a static message is a classic
example of a StatelessWidget.
Stateful Widgets
Stateful widgets are mutable and can change their state in response to
user interactions or other events. They are perfect for representing
dynamic UI elements, such as buttons, sliders, or text fields.

Dynamic State User Interaction

Stateful widgets maintain a They respond to user input
state object that holds the and update their state
current data. This state can be accordingly. This allows for
updated using the setState dynamic changes in the UI.
method.

Example
A button that increments a counter is a good example of a
StatefulWidget. The button updates the counter value, which is
then displayed on the screen.
Stateless vs Stateful
Stateless Widgets
Remain unchanged in response to user
interaction. They maintain a fixed state and
only react to changes in their parent widgets.

Stateful Widgets
Dynamic components that manage an internal
state. They can react to state changes and
modify their appearance accordingly, providing
a more interactive experience.
Scaffold
Scaffold is a basic layout structure based on material design.
In practice, if you use material design, every screen of your
app will have a Scaffold as its base. The Scaffold widget is
used for showing drawers, snackbars, bottomsheets, floating-
action buttons, and so on, by offering APIs. To display a
snackbar or a bottomsheet, you must use Scaffoldstate for
the current context.

9
Container Widget
The Container widget is a fundamental building block in Flutter, providing a way to wrap other widgets and control their styling,
padding, margin, and other visual properties.

Padding Margin Decoration

Adds space around the child widget. Adds space around the container itself. Applies background colors, gradients,
shadows, and other visual effects to
the container.
example
Center(
child: Container(
decoration: BoxDecoration(border: Border.all()),
height: 200.0,
width: 200.0,
),
)

11
Image Widget
The Image widget is used to display images in your Flutter
application. It can load images from assets, networks, or
files.

1 Asset Images
Load images from the assets folder of your
Flutter project.

2 Network Images
Load images from a URL on the internet.

3 File Images
Load images from local files on the device.
Image.network
Center(
child: Container(
height: 200.0,
width: 200.0,
child: Image.network("https://flutter.io/images/flutter-
mark-square-100.png"),
),
),

13
local
Image.asset(
'images/lake.jpg',
fit: BoxFit.cover,
),

14
Text Widget
The Text widget is used to display text in your
Flutter application. It offers a wide range of
customization options to control the appearance of
the text.
Property Description

style Controls the font, size,

color, and weight of
the text.
textAlign Aligns the text within
the widget.

maxLines Limits the number of

lines displayed.
Example
Center(
child: Container(
height: 200.0,
width: 200.0,
child: Text("This is a text“, style: TextStyle(
color: Colors.yellow,
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
),

16
Icon

17
Using Buttons
with Text
Flutter has different types of buttons for Material
Design and iOS. These button widgets all have a
required parameter onPressed to specify the
handler function when pressed. If the onPressed
handler is null, the button is disabled. The content
of a button is specified with the parameter child of
type Widget. FlatButton, RaisedButton, and
OutlineButton have different styles and behaviors
reacting to touches:
18
example
ElevatedButton(
child: Text("d"),
onPressed: () => {print('d')},
)

19
Text field
● A text field lets the user enter text, either with hardware
keyboard or with an onscreen keyboard.
● The text field calls the onChanged callback whenever the
user changes the text in the field. If the user indicates
that they are done typing in the field (e.g., by pressing a
button on the soft keyboard), the text field calls
the onSubmitted callback.

20
const TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Email’",
),
)
const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText : “Password”,
),
)
21
AppBar
AppBar is basically used as a property of Scaffold, and the
majority of Scaffolds have app bars. The app bar consists of a
toolbar and potentially other widgets. For example, it can
host TabBar, FlexibleSpaceBar, or some actions optionally
followed by PopupMenuButton for less common operations.

22
Drawers
The mobile apps that use Material Design have two primary
options for navigation. These navigations
are Tabs and Drawers. A drawer is an alternative option for
tabs because sometimes the mobile apps do not have sufficient
space to support tabs.
A drawer is an invisible side screen. It is a sliding left menu
that generally contains important links in the application and
occupies half of the screen when displayed.

23
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(“Ayub Abshir "),
accountEmail: Text(“[email protected]"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"A",
style: TextStyle(fontSize: 40.0),
),
),
),
],
),
)
24
PlaceHolder

25
Column
Column is essential for composing layout in Flutter apps. It
displays its children in a vertical array. The following code
can be used for the Column widget:

26
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 20.0,
width: 20.0,
color: Colors.red,
),
Container(
height: 20.0,
width: 20.0,
color: Colors.yellow,
),
],
),
),

27
Row
The Row widget is similar to the Column widget, but still
different. We can say that it is the horizontal version of
column. It draws the children in a horizontal array.

28
example
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container( height: 20.0, width: 20.0, color: Colors.red, ),
Container( height: 20.0, width: 20.0, color: Colors.green, ),
Container( height: 20.0, width: 20.0, color: Colors.yellow, ),
],
),
),

29
Example
backgroundColor: value ? Colors.black : Colors.white,
body: Center(
child: Switch(
value: value,
onChanged: (v) {
setState(() {
value = v;
});
}),
)

30
Thanks!
Any questions?
You can find me at:
● www.DUGSIYO.com

31