Scribd
Upload
25 views

Flutter User Interface Using Scaffolds

The document discusses using Scaffold widgets in Flutter to design mobile app interfaces. It describes the key Scaffold properties like appBar, body, floatingActionButton and drawer that are used to build app layouts. Code examples are provided to demonstrate using these Scaffold properties.

Uploaded by

Clue 06
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Flutter User Interface Using Scaffolds

The document discusses using Scaffold widgets in Flutter to design mobile app interfaces. It describes the key Scaffold properties like appBar, body, floatingActionButton and drawer that are used to build app layouts. Code examples are provided to demonstrate using these Scaffold properties.

Uploaded by

Clue 06
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Flutter Interface Using Scaffold

Marlon L. Castro
Learning OUTCOMES
At the end of this lesson, learners should be able to:
• Design a Flutter mobile app using Scaffold widgets
FLUTTER WIDGETS
What is a widget?

• Everything in Flutter is a widget.


• Widgets are essentially user interface elements used
to design the app's user interface.
Widget tree
What is a widget? (2)

• Figure 1 shows a widget tree of a simple mobile app.


• The figure indicates that the main or the top-level
widget used in building the app is the MyApp widget.
• In other words, the application itself is a widget and
its user interface is built using one or more widgets.
• This virtue of composability enables us to build user
interfaces of any complexity.
FLUTTER SCAFFOLD
FLUTTER SCAFFOLD

• Scaffolds, also known as layouts, are at the heart of


creating user interfaces with Flutter.
• It is mostly in charge of building a foundation for the
app screen on which the child widgets can stick and
display themselves.
An Example of the
APP code USING
FLUTTER
SCAFFOLD
ESSENTIAL
WIDGETS
USED IN THE
APP
SCAFFOLD CLASS

• The Scaffold class saves us from having to manually


create each visual component when setting up the
appearance and design of our app.
• We can write less code for the app's appearance and
feel, which saves us time.
Constructor &
properties of
scaffold
widget
SCAFFOLD PROPERTIES

1. appBar
• appBar is primarily visible at the top of the Scaffold
widget and is a horizontal bar.
• It appears at the top of the screen and is the primary
component of the Scaffold widget.
• It makes use of the AppBar widget, which also has a
number of properties.
USING
appBar
Scaffold properties (2)
• 2. body
• The other essential and necessary properties of the
Scaffold widget is body, which will be used to display the
Scaffold's major content.
• By default, the widgets inside the body are put in the
top-left corner of the available area.
• The next slide shows an example of the use of the
Scaffold body property to center its content using the
Center widget.
Example codes using appBar
SCAFFOLD PROPERTIES (3)

3. floatingActionButton
• A button called floatingActionButton is visible in the bottom
right corner and floats above the body.
• It is a circle icon button that floats over the screen's content at a
specific location to highlight the application's main activity.
• The next slide shows an example of the use of the Scaffold
floatingActionButton property for creating the button.
Using floatingActionButton PROPERTY
SCAFFOLD PROPERTIES (4)

4. drawer
• A slider panel that is visible at the side of the body is called a
drawer.
• On mobile devices, it is often concealed, but the user can swipe it
from right to left or left to right to reveal the drawer menu.
• The next slide shows an example of the use of the Scaffold drawer
property for creating a drawer. The example also uses ListView,
Header, Menu, and ListTile widgets to make it attractive.
USING drawer PROPERTY
SCAFFOLD PROPERTIES (5)
5. drawer
• A navigation bar appears at the bottom of the scaffold when the
bottomNavigationBar property is used.
• The majority of mobile applications has a bottom navigation bar.
Developers can add several icons or texts as elements in the bar using
this property.
• The next slide shows an example using the Scaffold
bottomNavigationBar property for creating a bottom navigation
bar.
USING bottomNavigationBar
NavigationBar Class
• A material widget that's displayed at the bottom of
an app for selecting among a small number of views,
typically between three and five.
NavigationBar Class
• NavigationBar constructor
onDestinationSelected property
• Called when one of the destinations is selected.

• This callback usually updates the int passed to


selectedIndex.

• Upon updating selectedIndex, the NavigationBar will


be rebuilt.
selectedIndex property
• Determines which one of the destinations is currently
selected.

• When this is updated, the destination (from


destinations) at selectedIndex goes from unselected
to selected.
destinations property
• List<Widget> destinations
• The list of destinations (usually NavigationDestinations)
in this NavigationBar.

• When selectedIndex is updated, the destination from this


list at selectedIndex will animate from 0 (unselected) to
1.0 (selected). When the animation is increasing or
completed, the destination is considered selected, when
the animation is decreasing or dismissed, the destination
is considered unselected.
NavigationDestination class
• Creates a navigation bar destination with an icon and
a label, to be used in the NavigationBar.destinations.
NavigationDestination.selectedIcon property

• The optional Widget (usually an Icon) that's displayed


when this NavigationDestination is selected.

• If selectedIcon is non-null, the destination will fade


from icon to selectedIcon when this destination goes
from unselected to selected.
NavigationDestination.icon
• The Widget (usually an Icon) that's displayed for this
NavigationDestination.

• The icon will use


NavigationBarThemeData.iconTheme. If this is null,
the default IconThemeData would use a size of 24.0
and ColorScheme.onSurface.
NavigationDesitation.label
• The text label that appears below the icon of this
NavigationDestination.

• The accompanying Text widget will use


NavigationBarThemeData.labelTextStyle. If this are
null, the default text style would use
TextTheme.labelSmall with ColorScheme.onSurface.
Scaffold body
• The primary content of the scaffold.

• Displayed below the appBar, behind the


floatingActionButton and drawer.
Container class
• A convenience widget that combines common
painting, positioning, and sizing widgets.
Container.color property
• The color to paint behind the child.
• This property should be preferred when the
background is a simple color. For other cases,
such as gradients or images, use
the decoration property.
Container.alignment property
• Align the child within the container.

• If non-null, the container will expand to fill its parent and


position its child within itself according to the given
value. If the incoming constraints are unbounded, then
the child will be shrink-wrapped instead.

• Ignored if child is null.


Container. child property
• The child contained by the container.

• If null, and if the constraints are unbounded or also


null, the container will expand to fill all available
space in its parent, unless the parent provides
unbounded constraints, in which case the container
will attempt to be as small as possible.

You might also like