This document discusses layouts in mobile application development using Flutter. It introduces single child layout widgets like Padding, Align, and Container that position a single child. It also covers multiple child widgets like Row, Column, ListView and GridView that arrange multiple children horizontally or vertically. The document demonstrates creating a custom ProductBox widget using these layout widgets to design a product listing interface.

1. Mobile Application Development
class 04
Dr. Mazin Alkathiri
IT Department
Seiyun University
2023-2024

2. Introduction to Layouts
• Since the core concept of flutter is Everything is
widget, Flutter incorporates a user interface layout
functionality into the widgets itself.
• Flutter provides quite a lot of specially designed widgets
like Container, Center, Align, etc., only for the purpose of
laying out the user interface.
• Widgets build by composing other widgets normally use
layout widgets.
• Layout widgets can be grouped into two distinct category
based on its child −
– Widget supporting a single child
– Widget supporting multiple child

3. Single Child Widgets
• In this category, widgets will have only one widget as its child
and every widget will have a special layout functionality.
• For example, Center widget just centers it child widget with
respect to its parent widget and Container widget provides
complete flexibility to place it child at any given place inside it
using different option like padding, decoration, etc.,
• Single child widgets are great options to create high quality
widget having single functionality such as button, label, etc.,

4. some of the most important single child layout widgets
provided by Flutter are:
– Padding − Used to arrange its child widget by the given padding. Here,
padding can be provided by EdgeInsets class.
– Align − Align its child widget within itself using the value of alignment
property.
• The value for alignment property can be provided by FractionalOffset class.
The FractionalOffset class specifies the offsets in terms of a distance from the top left.
– FittedBox − It scales the child widget and then positions it according to the
specified fit.
– AspectRatio − It attempts to size the child widget to the specified aspect ratio
– Container − Generic, single child, box based container widget with alignment,
padding, border and margin along with rich styling features.
– Center − Simple, Single child container widget, which centers its child widget.

5. Multiple Child Widgets
• In this category, a given widget will have more
than one child widgets and the layout of each
widget is unique.
• For example, Row widget allows the laying out of
its children in horizontal direction, whereas
Column widget allows laying out of its children in
vertical direction. By composing Row and
Column, widget with any level of complexity can
be built.

6. Let us learn some of the frequently
used widgets in this section.
• Row − Allows to arrange its children in a horizontal
manner.
• Column − Allows to arrange its children in a vertical
manner.
• ListView − Allows to arrange its children as list.
• GridView − Allows to arrange its children as gallery.
• Expanded − Used to make the children of Row and
Column widget to occupy the maximum possible area.
• Table − Table based widget.
• Flow − Flow based widget.
• Stack − Stack based widget.

7. Aligning widgets

8. Advanced Layout Application
• In this section, let us learn how to create a
complex user interface of product listing with
custom design using both single and multiple
child layout widgets.
• For this purpose, follow the sequence given
below −
– Create a new Flutter application in Android
studio, product_layout_app.
– Replace the main.dart code with folowing code.

10. • Here, We have created MyHomePage widget by
extending StatelessWidget instead of default
StatefulWidget and then removed the relevant code.
• Now, create a new widget, ProductBox according to
the specified design as shown below

12. Please observe the following in the code −
• ProductBox has used four arguments as specified below −
– name - Product name
– description - Product description
– price - Price of the product
– image - Image of the product
• ProductBox uses seven build-in
widgets as specified below −
– Container
– Expanded
– Row
– Column
– Card
– Text
– Image
• ProductBox is designed using the above mentioned widget. The
arrangement or hierarchy of the widget is specified in the
diagram shown below −

13. • Now, place some dummy image (see below) for product
information in the assets folder of the application and
configure the assets folder in the pubspec.yaml file as
shown below −
assets:
- assets/appimages/floppy.png
- assets/appimages/iphone.png
- assets/appimages/laptop.png
- assets/appimages/pendrive.png
- assets/appimages/pixel.png
- assets/appimages/tablet.png

14. Finally, Use the ProductBox widget in the MyHomePage widget as
specified below −