Flutter – Introduction to Layouts

Sameeha moogab
2024
Outline
• Structural widgets
• Type of Layout Widgets
Structural widgets
There are a few convenience widgets that you’ll likely use
in every Flutter app you build. They provide configuration
and structure to your app, with little work from you.
• MaterialApp widget
• Scaffold
• AppBar
• Theme
Using Material Components
● A Material app starts with the MaterialApp widget, which
builds a number of useful widgets at the root of your app,
including a Navigator, which manages a stack of widgets.
● The Navigator lets you transition smoothly between screens
of your application.
● Material app implements the animations that happen when a
user navigates between pages.
● MaterialApp takes care of the appwide theme .
● Home property represents the app’s home page, which can be
any widget.
The Scaffold widget
● Scaffold is a designed to make applications as easy as
possible to build.
● Scaffold is the widget that gives your app structure.
● Scaffold defines the “basic Material Design visual layout,”
which means it can make your app look like this pretty easily.
● The Scaffold widget provides many optional features, pick
and choose which features you want.
● It’s common for each of the different screens in your
application to have its own Scaffold widget.
The Scaffold widget
● It provides functionality to add
○ A drawer (an element that animates in from one Listing
○ A bottom sheet (an element that animates into view from the bottom of the
screen).
○ The AppBar in a scaffold is automatically set up to display a menu button in
the top-left corner of your app, which will open the drawer;
○ Body is a Scaffold argument that represents the main portion of the screen.
● If there is no app bar, body is essentially the entire screen.
The Scaffold widget
• Scaffold Properties
AppBar widget
● Typically used in the Scaffold.appBar property, which fixes it
to the top of the screen with a certain height.
● The most notable feature of AppBar is that it provides
navigation features for free. It automatically inserts a menu
button if the app bar’s parent is a scaffold and the drawer
argument isn’t null.
● And if the Navigator of your app detects that you’re on a
page that can navigate “back” (like a browser’s back button),
it automatically inserts a back button.
AppBar widget
● Usually contains the standard title, toolbar, leading, and
actions properties (along with buttons), as well as many
customization options.
● The property that handles these menu buttons and back
buttons is called the leading action.
● If you don’t want a menu button to appear, You can set
AppBar.automaticallyImplyLeading to false and then pass the
leading argument to whatever widget you wish.
 AppBar Properties
● The title property is typically implemented with a Text widget.
● The leading property is displayed before the title property.
Usually this is an IconButton or BackButton.
● The actions property is a list of widgets aligned to the upper right
of an AppBar widget usually with an IconButton or
PopupMenuButton.
● The flexibleSpace property is stacked behind the Toolbar or
TabBar widget.
● A background image is commonly applied to the flexibleSpace
property.
ThemeData widget
● allows you to set many default styles in your app, such as colors, font styles,
button styles, and more.
● Theme will be automatically applied throughout your app.
● Flutter applies styling in the following order:

 Styles applied to the specific widget.

 Themes that override the immediate parent theme.
 Main theme for the entire app.
Type of Layout Widgets
Layout widgets can be grouped into two distinct category based
on its child:
• Widget supporting a single child
• Widget supporting multiple child
Single Child Widgets
• The single child layout widget is a type of
widget, which can have only one child
widget inside the parent layout widget.
• Single child widgets are great options to
create high quality widget having single
functionality such as button, label, etc.,
Single Child Widgets
Flutter provides us many single child widgets to make the app UI
attractive.
• Container: It is the most popular layout widget that provides customizable options
for painting, positioning, and sizing of widgets.
• Padding: It is a widget that is used to arrange its child widget by the given padding.
• Center: This widget allows you to center the child widget within itself.
• Align: It is a widget, which aligns its child widget within itself and sizes it based on
the child's size.
• SizedBox: This widget allows you to give the specified size to the child widget
through all screens.
• ConstrainedBox: It is a widget that allows you to force the additional constraints on
its child widget.
Padding Widgets @override
class CarWidget extends StatelessWidget { Widget build(BuildContext context) {
CarWidget(this.make, this.model, this.imageSrc) : super(); return Padding(
padding: EdgeInsets.all(20.0),
final String make; final String model; final String imageSrc;
child: Center(
@override child:
Widget build(BuildContext context) { Column(
return Center( children: [ Text(make), Text(model), Image.network(imageSrc) ]))); }
child: Column(
children: [ Text(make), Text(model),
Image.network(imageSrc) ])); } }
Multiple Child Widgets
The multiple child widgets are a type of
widget, which contains more than one child
widget, and the layout of these widgets
are unique.
 Multiple Child Widgets
Row: It allows to arrange its child widgets in a horizontal direction.
Column: It allows to arrange its child widgets in a vertical direction.
ListView: It is the most popular scrolling widget that allows us to arrange its child widgets
one after another in scroll direction.
GridView: It allows us to arrange its child widgets as a scrollable, 2D array of widgets. It
consists of a repeated pattern of cells arrayed in a horizontal and vertical layout.
Expanded: It allows to make the children of a Row and Column widget to occupy the
maximum possible area.
Table: It is a widget that allows us to arrange its children in a table based widget.
Flow: It allows us to implements the flow-based widget.
Stack: It is an essential widget, which is mainly used for overlapping several children
widgets. It allows you to put up the multiple layers onto the screen.
 Column
• A widget that displays its children in a vertical array.
• To cause a child to expand to fill the available vertical space,
wrap the child in an Expanded widget.
• The Column widget does not scroll. If you have a line of
widgets and want them to be able to scroll if there is
insufficient room, consider using a ListView.
Column( mainAxisAlignment:
MainAxisAlignment.spaceEvenly, children:
[ Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'), ], );

• setting the main axis alignment to spaceEvenly divides the free

vertical space evenly between, above, and below each image.
 Row
• a Row widget to arrange widgets horizontally.
Row( mainAxisAlignment:
MainAxisAlignment.spaceEvenly, children:
[ Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'), ], );
• setting the main axis alignment to spaceEvenly divides the free
horizontal space evenly between, before, and after each image.
• Widgets can be sized to fit within a row or column by using the
Expanded widget. Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded
( child: Image.asset('images/pic1.jpg'), ),
 ListView
• ListView, a column-like widget, automatically provides scrolling when
its content is too long for its render box.
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
Advanced Layout Application
Advanced Layout Application
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { // This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,),
home: MyHomePage(
title: 'Product layout demo home page'),
); } }
Advanced Layout Application
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Product Listing")),
body: ListView(
padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
children: [
Advanced Layout Application
ProductBox(
name: "iPhone",
description: "iPhone is the stylist phone ever",
price: 1000, image: "iphone.png"),
ProductBox(
name: "Pixel",
description: "Pixel is the most featureful phone ever",
price: 800, image: "pixel.png"),
ProductBox( name: "Laptop",
description: "Laptop is most productive development tool",
price: 2000, image: "laptop.png"),
ProductBox(
name: "Tablet",
description: "Tablet is the most useful device ever for meeting",
price: 1500,
image: "tablet.png"),
ProductBox(
name: "Pendrive",
description: "Pendrive is useful storage medium",
price: 100, image: "pendrive.png"),
ProductBox(
name: "Floppy Drive",
description: "Floppy drive is useful rescue storage medium",
price: 20,
image: "floppy.png"), ], )); } }
 Advanced Layout Application
class ProductBox extends StatelessWidget {
ProductBox({Key key, this.name, this.description, this.price,
this.image}) : super(key: key);
final String name;
final String description;
final int price;
final String image;
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2),
height: 120,
Advanced Layout Application
child: Card(
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/appimages/" + image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child:
Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(this.name, style: TextStyle(fontWeight: FontWeight.bold)),
Text(this.description),
Text("Price: " + this.price.toString()),
], ))) ]))); } }
Homework
 Topic to search

 What are Gestures in flutter