Scribd
Upload
34 views13 pages

Chapter 2 - Flutter & Dart Basics (Part 4)

Uploaded by

dxrshx101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views13 pages

Chapter 2 - Flutter & Dart Basics (Part 4)

Uploaded by

dxrshx101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Flutter &

Dart Fundamentals
(Part 4 – Basic UI)
6002CEM
Mobile App Development

Flutter
Flutter & Dart Learning Steps
Install Android Studio with Flutter to prepare for
building apps.

Understanding the Flutter Architecture

Learn Flutter & Dart Basics (This Chapter)

Create your first Flutter app

Create other Flutter apps


Learning Outcomes

• At the end of this lecture, you should be able to:


• Describe the basic widgets in Flutter.
Widgets

A widget is a basic visual element


Flutter UI is built out of widgets. to create user interfaces and define
the app’s functionality.

A Flutter widget can be defined as Widgets can be thought of as Lego


a self-contained, reusable piece of blocks, which can be combined and
code that describes how part of the arranged in many different ways to
user interface should be displayed. create complex user interfaces.
Stateless vs Stateful Widget

Stateless widgets do not have Stateful widgets have an internal


any internal state that can change state that can change over time.
These widgets have a state object
over time. They are purely based that stores data that can be
on their input parameters, also modified by the widget or external
called props or properties, and events such as user interactions.
render their output based on The output of a stateful widget can
those input parameters alone. change based on both its input
Examples of stateless widgets parameters and its internal state.
Examples of stateful widgets
include buttons, labels, and icons. include forms, lists, and sliders.
Widget Tree
• The Widget tree is a hierarchical structure of widgets in Flutter,
which defines the user interface of a Flutter app.

• Widgets are arranged in a tree-like structure, where each widget


represents a particular component of the user interface.
Widget Tree

When a widget needs to update its user interface, it rebuilds


itself and its child widgets. This process is called a “rebuild” or
a “rerender”. The rebuild process can occur due to changes in
the widget’s state, changes in its parent widget, or due to
changes in the app’s data.

The widget tree starts with a single root widget, which is


usually a MaterialApp or a CupertinoApp. The root widget can
have child widgets, which can have their own child widgets,
and so on. The Widget tree can be deep or shallow, depending
on the complexity of the app’s user interface.
Widget Tree

The Widget tree is important because it


determines the layout and appearance
of the user interface.

Each widget can have its own set of


properties, such as color, size, position,
and behaviour. These properties are
inherited by the child widgets, which
can override them if needed.
Basic Widgets
Widget Description
Text The Text widget lets you create a run of styled text
within your application.

Row, Column These flex widgets let you create flexible layouts in
both the horizontal (Row) and vertical (Column)
directions.

Stack Instead of being linearly oriented (either horizontally


or vertically), a Stack widget lets you place widgets
on top of each other in paint order. You can then use
the Positioned widget on children of a Stack to
position them relative to the top, right, bottom, or left
edge of the stack.
Basic Widgets
Widget Description
Image The Image widget is a graphical user interface (GUI) element that is used to
display an image in a graphical application or a web page. The widget can
be configured to display images from a file, a URL, or an in-memory buffer.

ListView A ListView widget is a common widget used in mobile and web


applications to display a scrollable list of items. In Flutter, a ListView widget
can display a list of widgets of any type, such as Text, Image, Icon, or even
custom widgets.

TextField A TextField widget consist of a rectangular box with a cursor indicating the
current position of the text input. TextField widgets can often be
customized with various options such as placeholder text (i.e., text that
appears in the widget before the user starts typing), input validation, and
autocomplete.
Basic Widgets
Widget Description
Container The Container widget lets you create a rectangular visual
element. A container can be decorated with a
BoxDecoration, such as a background, a border, or a
shadow. A Container can also have margins, padding, and
constraints applied to its size. In addition, a Container can
be transformed in three-dimensional space using a
matrix.

View the Full List of Flutter Widgets Here:


https://docs.flutter.dev/reference/widgets

View the Widgets by Category:


https://docs.flutter.dev/ui/widgets
Basic Widgets

ListView Widget Text Field Widget


Simple Flutter App with Basic UI
Code Output

The runApp() function takes the given Widget and makes it the root of the widget tree. In this example,
the widget tree consists of two widgets, the Center widget and its child, the Text widget. The
framework forces the root widget to cover the screen, which means the text "Hello, world" ends up
centered on screen. The text direction needs to be specified in this instance; when the MaterialApp
widget is used, this is taken care of for you, as demonstrated later.

You might also like