Mobile Application Development

TOPIC 5
Flutter Screen Components
 Topic 5: Outline
2

 The widget tree structure and creating layouts:

 Linear layout,
 Absolute layout,
 Table layout,
 Relative layout,
 Frame layout and scroll view.
 Navigation
 Themes and Styling
 User Input
 Creating the User Interface programmatically
 Listening for UI notifications
 The Widget Tree Structure
3

 What is a Widget Tree?

 The hierarchical structure of all the widgets
that compose your Flutter app’s UI
 Every widget in Flutter is a node in a tree
structure.
 The Widget Tree represents how
widgets are nested within each other,
forming a parent-child relationship.
 Parent widgets can have one or more child
widgets, defining the UI layout.
 Flutter Screen Components ..
Scaffold
4

 Purpose:
 Organizes the main structure of a page,
including key UI elements like the navigation,
action buttons, and body content.
 Typical components include:
 AppBar: The top bar with actions.
 Body: The main screen content.
 Drawer: A slide-out menu from the left.
 BottomNavigationBar: For navigation
between major sections.
 FloatingActionButton: A prominent action
button.
 Scaffold .. basic example
5

 Scaffold(
 appBar: AppBar(
 title: Text('My App'),
 ),
 body: Center(
 child: Text('Hello, world!'),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () {},
 child: Icon(Icons.add),
 ),
 );
 Scaffold .. Drawer
6

 Drawer:
 A side navigation menu that slides in from the left.
 Useful for apps with multiple navigation sections or options.
 Basic example
 Scaffold(
 drawer: Drawer(
 child: ListView(
 children: [
 DrawerHeader(child: Text('Header')),
 ListTile(
 title: Text('Item 1'),
 onTap: () {
 // Handle navigation
 }, ), ], ), ), );
 Scaffold .. Bottom Navigation
Bar
7

 BottomNavigationBar:
 Used for switching between major app sections at the bottom of
the screen.
 Basic example
 Scaffold(
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(
 icon: Icon(Icons.home),
 label: 'Home', ),
 BottomNavigationBarItem(
 icon: Icon(Icons.settings),
 label: 'Settings', ), ],
 onTap: (int index) {
 // Handle navigation
 }, ), );
 Scaffold .. Floating Action
8

 FloatingActionButton:
 A circular button often used for the primary
action on a page (e.g., adding a new item).
 Example
 FloatingActionButton(
 onPressed: () {
 // Perform action
 },
 child: Icon(Icons.add),
 );
 Scaffold .. Snackbar
9

 Snackbar:
 A lightweight, temporary notification displayed at
the bottom of the screen.
 Example
 ScaffoldMessenger.of(context).showSnackBar(
 SnackBar(
 content: Text('This is a snackbar'),
 action: SnackBarAction(
 label: 'Undo',
 onPressed: () {
 // Handle action
 }, ), ), );
 Scaffold Example with All
Components
10

 Scaffold(
 appBar: AppBar(
 title: Text('Scaffold Example'), ),
 drawer: Drawer(
 child: ListView(
 children: [DrawerHeader(child: Text('Header')), ListTile(title:
Text('Item 1'))], ), ),
 body: Center(child: Text('Main content')),
 floatingActionButton: FloatingActionButton(onPressed: () {}, child:
Icon(Icons.add)),
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
 BottomNavigationBarItem(icon: Icon(Icons.settings), label:
'Settings'),
 ],
 ), );
 Layouts in Flutter
11

 Layouts in Flutter are the building blocks that

define how widgets are arranged on the
screen.
 Widgets form the core of Flutter layouts,
including containers, rows, columns, and more
complex structures like stacks or grids.
 Common Layout Widgets
 Column: Arranges children vertically.
 Row: Arranges children horizontally.
 Stack: Overlaps widgets on top of each other.
 Container: Adds padding, margins, borders, and
background colors.
 Common Layout Types.. Linear
Layout
12

 A Linear Layout arranges widgets in a

single direction, either vertically or
horizontally.
 Flutter Equivalent:
 Column is used for vertical layout, and
 Row is used for horizontal layout.
 Example
Column( Row(
children: [ children: [
Text('Item 1'), Text('Item 1'),
Text('Item 2') Text('Item 2'),
],); ], );
 Common Layout Types ..
Absolute Layout
13

 Absolute Layout Concept:

 A layout where widgets are positioned at exact
coordinates on the screen without considering their
neighbors.
 It gives full control over the position of each widget.
 Flutter uses, the Stack widget, combined with
Positioned, allows for absolute positioning of
widgets.
 Example
 Stack(
 children: [Positioned(top: 50, left: 30, child:
Text('Hello!'))],
 );
 Common Layout Types .. Table
Layout
14

 Organizes widgets in a grid with rows and

columns.
 Flutter provides a Table widget that can be used
to create table-like layouts with rows and columns.
 Key Widgets:
 Table, TableRow, TableCell.
 Example
 Table(
 children: [
 TableRow(children: [Text('Cell 1'), Text('Cell 2')]),
 TableRow(children: [Text('Cell 3'), Text('Cell 4')]),
 ], );
 Common Layout Types ..
Relative Layout
15

 Flutter does not have a RelativeLayout widget, but you can achieve
relative positioning using Stack and Align or Positioned widgets.
 Flutter uses Align and Stack:
 Aligns widgets relative to the parent or other widgets.
 Use Align when you want relative positioning without specifying exact
coordinates. You can position widgets at different points like topLeft, center,
bottomRight, etc.
 Stack:
 Allows widgets to be placed on top of each other, and you can position child
widgets relatively using Positioned or Align.
 Example Stack(
children: [
Align( Container(width: 300, height: 300,
alignment: color: Colors.blue),
Alignment.topRight, Positioned( top: 20, left: 50,
child: Text('Top Right'), child: Text('Top-Left'),
); ), ], );
 Common Layout Types .. Frame
Layout
16

 A Frame Layout in traditional Android development

allows widgets to overlap each other, placing them in a
stack-like arrangement.
 Flutter Equivalent:
 In Flutter, this is achieved using the Stack widget, which
overlays child widgets on top of each other, similar to a
frame layout.
 Key Widget: Stack
 What is a Stack Widget?
 Stack:
 A widget that positions its children relative to the edges of the
parent or on top of each other.
 Use Case:
 Overlaying widgets such as placing text on an image or
positioning buttons over a background.
 Common Layout Types .. Frame
Layout …
17

 Basic Structure of Stack

 The Stack allows the Text widget to be placed on top
of the Container.
 The order in which widgets are declared in the
children list determines their stacking order.
 Basic Example:
 Stack(
 children: [
 Container(color: Colors.blue, width: 300, height:
300),
 Text('Overlay Text'),
 ],
 );
 Common Layout Types .. Frame
Layout …
18

 Layering Multiple Widgets in Stack

 Multiple Overlays: Widgets can be layered on top of each
other inside the Stack.
 Example:
 Stack(
 children: [
 Container(color: Colors.blue, width: 300, height: 300),
 Positioned(
 top: 30,
 left: 50,
 child: Text('First Overlay'), ),
 Positioned(
 bottom: 20,
 right: 20,
 child: Text('Second Overlay'), ), ], );
 Common Layout Types .. Grid
Layout with GridView
19

 Grid Layout Concept:

 A layout where widgets are arranged in a grid structure, consisting of
rows and columns.
 Each cell in the grid can contain any widget.
 Flutter provides the GridView widget to create a grid-based layout.
 A scrollable grid of widgets arranged in a 2D array (rows and columns
 Key Widgets:
 GridView, GridView.count, GridView.builder, GridTile.
 Example:
 GridView.count(
 crossAxisCount: 2, //creates 2 columns
 children: [
 Container(color: Colors.red),
 Container(color: Colors.blue),
 Container(color: Colors.green),
 ], );
 Common Layout Types .. Scroll
View
20

 A scroll view is a widget that allows for scrolling when the

content exceeds the available space on the screen.
 Flutter provides the SingleChildScrollView widget for basic
scrolling functionality.
 Example
 SingleChildScrollView(
 child: Column(
 children: [
 Text('Item 1'),
 Text('Item 2'),
 Text('Item 3'),
 // Add more widgets here
 ],
 ),
 );
 Common Layout Types .. Scroll
View …
21

 Horizontal Scroll ViewHorizontal Scrolling:

 Use SingleChildScrollView with scrollDirection:
Axis.horizontal for horizontal scrolling.
 Example:
 SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: Row(
 children: List.generate(10, (index) =>
Text('Item $index')),
 ),
 );
 Common Layout Types .. Scroll
View …
22

 Using ListView for Scrollable Lists

 ListView: A more efficient widget for
handling scrollable lists.
 Example:
 ListView.builder(
 itemCount: 50,
 itemBuilder: (context, index) {
 return ListTile(title: Text('Item $index'));
 },
 );
 Navigation
23

 Navigator: Handles navigation between different

screens.
 Push: Adds a new screen to the navigation stack.
 Pop: Removes the current screen from the stack.
 Example
 Navigator.push(context, MaterialPageRoute(builder: (context) =>
SecondPage()));
 Named Routes: Define navigation routes in a
centralized way.
 MaterialApp(
 routes: {
 '/': (context) => HomeScreen(),
 '/second': (context) => SecondScreen(),
 },
 );
 Themes and Styling
24

 ThemeData: Centralized control of

colors, fonts, and styles in the app.
 Global Themes: Set themes for the
entire app.
 MaterialApp(
 theme: ThemeData(
 primaryColor: Colors.purple,
 textTheme: TextTheme(bodyText1:
TextStyle(fontSize: 18)),
 ),
 );
25

 Local Styles: Customize individual

widgets.
 Text('Styled Text', style: TextStyle(color:
Colors.red, fontSize: 20));
26

 User Input
 Form Widgets: Capture user input like
text, numbers, or selections.
 Common Widgets:
 TextField: For text input.
 Checkbox, Switch, RadioButton: For
Boolean inputs.
 TextField(
 decoration: InputDecoration(hintText:
'Enter your name'),
 );
27

 Form Validation:
 Use Form and GlobalKey for input
validation.
 Example
 final _formKey = GlobalKey<FormState>();
 Form(
 key: _formKey,
 child: TextFormField(validator: (value) =>
value.isEmpty ? 'Required' : null),
 );
 Creating the User Interface
Programmatically
28

 Flutter allows dynamic creation of UIs at runtime.

 Dynamically change widgets based on user input
or app state.
 Example
 @override
 Widget build(BuildContext context) {
 return ListView.builder(
 itemCount: 10,
 itemBuilder: (context, index) {
 return ListTile(title: Text('Item $index'));
 },
 );
 }
 Listening for UI Notifications
29

 Callbacks: Listen for events such as

button taps or text input.
 Example
 ElevatedButton(
 onPressed: () { print('Button Pressed!'); },
 child: Text('Click Me'),
 );
 Listening for UI Notifications …
30

 GestureDetector:
 Capture gestures like swipes or taps.
 Example
 GestureDetector(
 onTap: () { print('Tapped'); },
 child: Container(color: Colors.blue, height:
50, width: 50),
 );
 Listening for UI Notifications …
31

 StreamBuilder:
 Respond to asynchronous data changes.
 Example
 StreamBuilder(
 stream: myStream,
 builder: (context, snapshot) {
 return Text(snapshot.hasData ?
snapshot.data : 'Loading...');
 },
 );
32