Getting Started
with Flutter
Jumail Bin Taliba
School of Computing, UTM
March 2020
Outline
• Creating Flutter Project
• Flutter Project Structure
• Building UI by example
Creating Flutter Projects (1)
• In VS Code
• Using Flutter tool from Command Line (Git Bash, Cmd or
Powershell)
• Clone from an existing project
Creating Flutter Project (2) – VS Code
1. From VS Code, open Command Palette, Ctrl Shift P
2. Choose from the menu, Flutter New Project
Creating Flutter Project (3) - CLI
1. Open Git Bash
2. Move to the directory where you save all your flutter projects.
cd d:/code/flutter
3. Create a new directory in it for your new project
mkdir flutter_counter
4. Move to the new project directory
cd flutter_counter
5. Run flutter tool to start creating the project (don’t forget the dot)
flutter create .
6. Open the source code into VS Code (don’t forget the dot)
code .
Creating Flutter Project (4) - Clone
1. Copy the folder of any of your existing project.
• You can clone from git file (created with git bundle), or from online repo (e.g. github)
• You can copy from a zip file, or a folder
In the following example, we are going to copy / clone from my project template
on github.
2. Clone my github repo (command below should be in one-line)
git clone https://github.com/jumail-
utm/flutter_template.git my_project
You can use any project name. Here, we use my_project
3. Move to the project directory
cd my_project
4. Run flutter tool to properly rename the project (don’t forget the dot)
flutter create –project-name .
5. Open the source code into VS Code (don’t forget the dot)
code .
Flutter Project Structure
you will work on this file(s)
to download dependencies
Basic Flutter Program
For Convenience
• Install VS Code extensions
• Flutter
• Enable: UI guides
• Bracket Pair Colorizer
• Pub spec Assist
• Use USB debugging (i.e. running directly on real phone)
• Enable USB debugging and developer mode in your phone
• Use Hot Reload or Hot Restart when debugging your code
• Hot Reload : Ctrl F5
• Hot Restart : Ctrl Shift F5
Introduction to Widgets
• What is a widget?
• The building blocks that construct the application
• Widgets in Flutter are immutable
• Type of widgets:
• Stateless – does not change at all
• Stateful – can change to reflect the state
• Common widgets:
• App widgets (e.g. MaterialApp)
• Convenience widgets: Scaffold, NavigationBar,
AppBar
• Layout widgets: Column, Row, ListView
• Text widgets: Text, RichText
• Button widgets: IconButton, RaisedButton,
FloatingActionButton
• Graphics widgets: Image, Icon
Building UI, example: Whatsapp Clone
you will work on this file(s)
to download dependencies
Preparing Starter Project (1)
1. Open Git Bash
2. Clone my github repo (command below should be in one-line)
git clone https://github.com/jumail-
utm/flutter_whatsapp_ui
3. Move to the project directory
cd flutter_whatsapp_ui
4. Go to the starting point of the project and create a new branch to start
editing
git checkout b35b0b8 –b my_branch
5. Open the source code into VS Code (don’t forget the dot)
code .
6. Try running the program by pressing F5 (you want to choose an emulator
first)
Preparing Starter Project (2)
Creating a Material App
Creating a Home Screen (1)
Creating a Home Screen (2)
What is MaterialApp?
• A convenience widget that wraps a number of widgets
commonly required for applications that embraced material
design.
• It provides a bunch of things including:
• Theming
• Routing
• Main route (home)
• Localization
• MaterialApp is used to organize multiple screens for the app
Scaffold
• Provides the basic visual layout structure based on material
design.
• It provides a bunch of things including:
• appBar
• drawer
• bottomNavigationBar
• Body
• floatingActionButton
• Scaffold is commonly used to build UI for a screen
Scaffold Components
appBar
body
floatingActionButton
bottomNavigationBar
AppBar Components
leading title actions
flexibleSpace
bottom
Adding AppBar
Adding TabBar
TabBar must have TabController
Adding TabView
Adding FloatingActionButton
bottomNavigationBar (1)
bottomNavigationBar (2)
AppBar’s flexibleSpace and SafeArea
Refactoring
• As you progress building the UI, the widget tree grows very quickly
• A long tree make it less readable. Thus, refactoring
• Types of refactoring:
1. Constant
2. Method or function
3. Class (convention in Flutter is by overriding the build method)
• Further refactoring to separate files
• It is a good practice to use a proper file and directory structure
• Easy to maintain
• Easy to scale
• Better for teamwork
• Example structure:
• assets
• backends
• lib
• models
• widgets
• screens
• home
• login
• splash
• services
