Lab5 Creatingabasicflutterapplication

Faculty of Computer Science and Information Technology
BIM 30603/BIT 34103 Mobile Application Development

Semester 1 2022/2023
Topic Lab 5 – Creating a Basic Flutter application

Duration 2 hours
Tool/Software VS Code/Android Studio/Open Source IDE
1. Creating a Basic Flutter App
1.1 Select from menu > View > Command Pallete… Flutter: New Project.
Figure 1.1
1.2 Select Application..generate a Flutter application. Click on “Select a folder to create

the project in”.
Figure 1.2
1.3 Create Project Name, e.g : test_app
Figure 1.3
1.4 Delete some the Dart codes, only maintain main()method.
Figure 1.4
1
1.5 Replace “MyApp()” with “MaterialApp()” widget. MaterialApp() plays as a root

widget and wrapper to the rest of the widgets in the app. It allows to use google
material design features in the app. Refer to
https://api.flutter.dev/flutter/material/MaterialApp-class.html.
Figure 1.5
1.6 Specify any property inside the MaterialApp() widget. For example a ‘home’ property
that has a text widget. Pass any string inside the text widget, separate with comma for
each property.
Figure 1.6
1.7 Set emulator to preview the app. Select View > Command Pallete..> Flutter:Launch
Emulator. Select any emulator that had been created previously or create a new one.
Figure 1.7a
Figure 1.7b
1.8 Select from menu> Run > Start Debugging. A screen display will appear in your
emulator.
2
Figure 1.8
2. Using Scaffold and AppBar Widget
2.1 Delete Text() widget after home property and replace with Scaffold() widget.
Figure 2.1
2.2 Add appBar properties and an AppBar() widget.
Figure 2.2
3
2.3 Add title properties and Text() widget. Delete ‘const’ in front the MaterialApp()
widget. Add ‘const’ to Text() widget. Click on ‘Restart’ or ‘Hot Reload’.
Figure 2.3a
Title on AppBar will appear on emulator with interesting UI from Scaffold() widget.
Figure 2.3b
2.4 Add ‘centerTitle’ property, set to ‘true’ Boolean value. This is to center-align the title
on the AppBar() widget. Click on ‘Restart’ or ‘Hot Reload’.
4
Figure 2.4
2.5 Add another property to Scaffold() widget, known as body. Add in a Center() widget
in the body property to centralize content of the body property. Add in a child
property to wrap a Text() widget. Click on ‘Restart’ or ‘Hot Reload’.
Figure 2.5
2.6 Add a button known as floatingActionButton in Scaffold() widget. Add child property
with Text() widget. Click on ‘Restart’ or ‘Hot Reload’.
Figure 2.6
3. Change Color
Refer to material design website : https://m3.material.io/.
 Add backgroundColor property to AppBar() and FloatingActionButton() widget.

 Assign new color according to your preferences. Click on ‘Restart’ or ‘Hot Reload’.
5
Figure 3.1
4. Create a Stateless Widget
 Stateless widget – the state of the widget cannot change over time.
 Widget is a class.
4.1 Type ‘st’ under main() method. Select ‘Flutter Stateless Widget’ and Enter.
Figure 4.1
4.2 Change the ‘MyWidget’ class name according to your preference or maintain it. E.g:
Home class.
6
Figure 4.2
It does mean that Home class inherits from a predefined StatelessWidget class. It also
implement reusable concept.
4.3 Next step, return all the widget tree in MaterialApp() to a Stateless widget. Replace
the Container() widget with Scaffold() widget contents written in MaterialApp().
 Delete Container().
Delete Container()
Figure 4.3
4.4 Copy all contents of Scaffold() widget .
Widget tree
Figure 4.4
4.5 Paste on Home() class after return. Put semicolon at the end of Scaffold(),
7
Put semicolon ;
Figure 4.5
4.6 Call Home() class in main() and add ‘const’ to MaterialApp() widget.
Figure 4.6
4.7 Rearrange child property position in FloatingActionButton() widget.
Figure 4.7
5.0 Include Image in App
5.1 Replace Text() widget in body property with Image() widget. Add image property and
AssetImage() widget.
Figure 5.1
5.2 Create a directory in the Explorer and name it as assets. Right click on lib > New
Folder. Drag or paste any images into the assets folder.
8
Figure 5.2
5.3 Double click/ Open pubspec,yaml file from the Explorer. Search #assets.
Figure 5.3
5.4 Uncomment assets to activate the image setting in pubspec.yaml. Write the correct
directory of the image folder as in Explorer.
Figure 5.4
9
5.5 Update dependency. Go to menu > View > Command Pallate > Pub: Get Packages.
Figure 5.5
5.6 Write the directory of the image folder in the Image() widget. Click on ‘Restart’ or
‘Hot Reload’.
Figure 5.6a
Figure 5.6b
10

Lab5 Creatingabasicflutterapplication

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab5 Creatingabasicflutterapplication

Uploaded by

Copyright:

Available Formats

Faculty of Computer Science and Information Technology

BIM 30603/BIT 34103 Mobile Application Development

Topic Lab 5 – Creating a Basic Flutter application

1. Creating a Basic Flutter App

1.2 Select Application..generate a Flutter application. Click on “Select a folder to create

1.3 Create Project Name, e.g : test_app

1.4 Delete some the Dart codes, only maintain main()method.

1.5 Replace “MyApp()” with “MaterialApp()” widget. MaterialApp() plays as a root

2. Using Scaffold and AppBar Widget

2.2 Add appBar properties and an AppBar() widget.

Refer to material design website : https://m3.material.io/.

 Add backgroundColor property to AppBar() and FloatingActionButton() widget.

4. Create a Stateless Widget

4.7 Rearrange child property position in FloatingActionButton() widget.

5.0 Include Image in App

You might also like