Current trends in software Engineering
Flutter
Widgets
SLIIT - Faculty of Computing
CTSE – SE4010
Flutter
Architecture of Flutter Application
SLIIT - Faculty of Computing
CTSE – SE4010
SLIIT - Faculty of Computing
CTSE – SE4010
Widgets
• The core concept of the Flutter framework is In Flutter,
Everything is a widget.
• Widgets are basically user interface components used
to create the user interface of the application.
• In Flutter, the application is itself a widget. The
application is the top- level widget and its UI is build
using one or more children (widgets), which again build
using its children widgets.
• This composability feature helps us to create a user
interface of any complexity. For example, the widget
hierarchy of the above example is as specified in the
following diagram:
SLIIT - Faculty of Computing
CTSE – SE4010
Widget Hierarchy
My App
(top level/ Root)
Material App
MyhomePage
(Property:home)
Center
Scaffold
(property:body)
Text
AppBar
(Property:Appbar)
That’ s it
(property:child)
SLIIT - Faculty of Computing
CTSE – SE4010
Widget Hierarchy in details
• MyApp is the user created widget and it is build using the Flutter
native widget, MaterialApp.
• MaterialApp has a home property to specify the user interface of
the home page, which is again a user created widget,
MyHomePage.
• MyHomePage - is build using another flutter native widget,
Scaffold.
• Scaffold has two properties – body and appBar.
• body is used to specify its main user interface and appBar is used
to specify its header user interface.
• Header UI is build using flutter native widget, AppBar and Body
UI is build using Center widget.
• The Center widget has a property, Child, which refers the actual
content and it is build using Text widget.
SLIIT - Faculty of Computing
CTSE – SE4010
Widgets..
In Flutter, widgets can be grouped into multiple
categories based on their features, as listed below
• Platform specific widgets
• Layout widgets
• State maintenance widgets
• Platform independent / basic widgets
SLIIT - Faculty of Computing
CTSE – SE4010
Platform specific widgets
• Android specific widgets are designed in
accordance with Material design guideline by
Android OS. Android specific widgets are called as
Material widgets.
• iOS specific widgets are designed in accordance
with Human Interface Guidelines by Apple and they
are called as Cupertino widgets.
SLIIT - Faculty of Computing
CTSE – SE4010
Platform specific widgets
• Scaffold , AppBar, BottomNavigationBar ,TabBar , TabBarView , ListTile ,
RaisedButton , FloatingActionButton , FlatButton, IconButton ,
DropdownButton, PopupMenuButton , ButtonBar, TextField, Checkbox ,Radio ,
Switch ,Slider , Date & Time Pickers , SimpleDialog , AlertDialog
• CupertinoButton , CupertinoPicker , CupertinoDatePicker ,
CupertinoTimerPicker , CupertinoNavigationBar, CupertinoTabBar ,
CupertinoTabScaffold , CupertinoTabView , CupertinoTextField , CupertinoDialog
,CupertinoDialogAction , CupertinoFullscreenDialogTransition ,
CupertinoPageScaffold , CupertinoPageTransition , CupertinoActionSheet,
CupertinoActivityIndicator , CupertinoAlertDialog , CupertinoPopupSurface
SLIIT - Faculty of Computing
CTSE – SE4010
Layout widgets
To compose multiple widgets into a single widget, Flutter
provides large number of widgets with layout feature. For
example, the child widget can be centered using Center
widget.
Some of the popular layout widgets are as follows:
• Container: A rectangular box decorated using
BoxDecoration widgets with background, border and
shadow.
• Center: Center its child widget
• Row: Arrange its children in the horizontal direction.
• Column: Arrange its children in the vertical direction.
• Stack: Arrange one above the another.
SLIIT - Faculty of Computing
CTSE – SE4010
State maintenance widgets
• The dynamic nature of the application is through
interactive behavior of the widgets and the state
changes during interaction
SLIIT - Faculty of Computing
CTSE – SE4010
State maintenance widgets
The dynamic nature of the application is through interactive behavior of
the widgets and the state changes during interaction
StatelessWidget
Only requires a single method build to be implemented in its derived class. The build method gets
the context environment necessary to build the widgets through BuildContext parameter and
returns the widget it builds
Icon, IconButton, and Text are examples of stateless widgets.
StatefullWidget
Stateful can be thought of as redering through user input that becomes redering according to the
change of state. it can change its appearance in response to events triggered by user interactions or
when it receives data
Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets
SLIIT - Faculty of Computing
CTSE – SE4010
States….?
Change the
count ???
SLIIT - Faculty of Computing
CTSE – SE4010
SLIIT - Faculty of Computing
CTSE – SE4010
Statefull Widget
SLIIT - Faculty of Computing
CTSE – SE4010
Platform independent / basic widgets
Text
Text widget is used to display a piece of string. The
style of the string can be set by using style property
and TextStyle class. The sample code for this purpose
is as follows:
maxLines, int: Maximum number of lines to show
overflow, TextOverFlow: Specify how visual overflow is handled using TextOverFlow
class
style, TextStyle: Specify the style of the string using TextStyle class
textAlign, TextAlign: Alignment of the text like right, left, justify, etc., using TextAlign
class
textDirection, TextDirection: Direction of text to flow, either left-to-right or rightto-left
SLIIT - Faculty of Computing
CTSE – SE4010
Platform independent / basic
widgets
Image
Image widget provides different constructors to load
images from multiple sources and they are as follows:
Image - Generic image loader using ImageProvider
Image.asset - Load image from flutter project’s assets
Image.file - Load image from system folder
Image.memory - Load image from memory
Image.Network - Load image from network
The easiest option to load and display an image in
Flutter is by including the image as assets of the
application and load it into the widget on demand.
SLIIT - Faculty of Computing
CTSE – SE4010
Platform independent / basic
widgets
• Create a folder, assets in the project folder and place the necessary images.
• Specify the assets in the pubspec.yaml as shown below:
• Now, load and display the image in the application
The most important properties of the Image widget are as follows:
• image, ImageProvider: Actual image to load
• width, double - Width of the image
• height, double - Height of the image
• alignment, AlignmentGeometry - How to align the image within its bounds
SLIIT - Faculty of Computing
CTSE – SE4010
Platform independent / basic
widgets
Icon
Icon widget is used to display a glyph from a font
described in IconData class. The code to load a
simple email icon is as follows:
SLIIT - Faculty of Computing
CTSE – SE4010
Type of Layout Widgets
Widget supporting a single child
• 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.,
SLIIT - Faculty of Computing
CTSE – SE4010
Single Child Widget
SLIIT - Faculty of Computing
CTSE – SE4010
Multiple Child Widgets
In this category, a given widget will have more than
one child widgets and the layout of each widget is
unique.
SLIIT - Faculty of Computing
CTSE – SE4010
Multiple Child Widgets
• 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.
SLIIT - Faculty of Computing
CTSE – SE4010
Multiple Child Widgets
Mango
Vilat
Rs:256.00
SLIIT - Faculty of Computing
CTSE – SE4010
SLIIT - Faculty of Computing
CTSE – SE4010
Image rows
SLIIT - Faculty of Computing
CTSE – SE4010
Layout widgets
• https://github.com/bizz84/layout-demo-flutter
SLIIT - Faculty of Computing
CTSE – SE4010
Common layout widgets
standard widgets from the widgets library, and specialized
widgets from the Material library. Any app can use the
widgets library but only Material apps can use the Material
Components library.
Standard widgets
• Container: Adds padding, margins, borders, background color, or other decorations to a widget.
• GridView: Lays widgets out as a scrollable grid.
• ListView: Lays widgets out as a scrollable list.
• Stack: Overlaps a widget on top of another.
Material widgets
• Card: Organizes related info into a box with rounded corners and a drop shadow.
• ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.
•
SLIIT - Faculty of Computing
CTSE – SE4010
Container
• A convenience widget that combines common painting, positioning,
and sizing widgets.
• Containers with no children try to be as big as possible
unless the incoming constraints are unbounded
• Containers with children size them self to children
• Container can have one child
SLIIT - Faculty of Computing
CTSE – SE4010
Container
SLIIT - Faculty of Computing
CTSE – SE4010
Grid View
SLIIT - Faculty of Computing
CTSE – SE4010
ListView
SLIIT - Faculty of Computing
CTSE – SE4010
Stack
• Use for widgets that overlap another widget
• The first widget in the list of children is the base
widget; subsequent children are overlaid on top of
that base widget
• A Stack’s content can’t scroll
• You can choose to clip children that exceed the
render box
SLIIT - Faculty of Computing
CTSE – SE4010
Stack
SLIIT - Faculty of Computing
CTSE – SE4010
Hot Reload
Hot reload
• Hot reload feature quickly compile the newly added
code in our file and sent the code to Dart Virtual
Machine.
• After done updating the Code Dart Virtual Machine
update the app UI with widgets
• If you are using States in your application then Hot
Reload preservers the States so they will not update on
Hot Reload.
• Massively reduce the time from each development
cycle.
SLIIT - Faculty of Computing
CTSE – SE4010
Hot reload
SLIIT - Faculty of Computing
CTSE – SE4010
• Write Code
SLIIT - Faculty of Computing
CTSE – SE4010
SLIIT - Faculty of Computing
CTSE – SE4010
Hot Restart
SLIIT - Faculty of Computing
CTSE – SE4010
Hot Reload and Hot Restart ??
SLIIT - Faculty of Computing
CTSE – SE4010
Size Doesn’t Matter
SLIIT - Faculty of Computing
CTSE – SE4010
Custom Font ..
• Download the font you want
• Create directory in your project “Fonts”
• Open pubspec.html
• Indentation is very important
SLIIT - Faculty of Computing
CTSE – SE4010
Lets Create MiCard
SLIIT - Faculty of Computing
