MOBILE APPLICATION
DEVELOPMENT WITH FLUTTER
LESSON 1: FLUTTER BASICS
OUTLINE
What you will learn
Creating a new flutter project
File structure of a flutter app
Running flutter apps on physical android device
Creating a basic “Hello World” App
Basic Widgets: MaterialApp, Scaffold, Text, Image, Buttons, Icon.
Lab Activity: Instagram Post UI, Part 1
CREATING A NEW PROJECT
To create a new flutter application in visual studio code.
Method 1:
1.Open the Command Palette (Ctrl + Shift + P (Cmd + Shift + P on
macOS)).
2.Select the Flutter: New Project command and press Enter.
3.Select Application and press Enter.
4.Select a Project location.
5.Enter your desired Project name.
CREATING A NEW PROJECT
Method 2:
1. Open terminal (command prompt or powershell on windows) at
your desired directory.
2. Write the command flutter create appname
APP FOLDER STRUCTURE
On the created flutter app, there are few important files to know about
as for now, including:
RUNNING FLUTTER APP
We can run our flutter apps by using either a physical device or an emulator.
To run the application on physical android device do the following.
1. Enable usb debugging and set developer mode on on your device (how
to do this may vary depending on the version and model of your android
phone)
2. Go to VS Code and open main.dart file located at to lib > main.dart
3. Choose your device from bottom right corner of VS Code (see the image
that follows)
4. Run the app by either
- Clicking the run button at the near top right of VS Code (Recommended
method)
- Typing the command flutter run on the terminal at your app directory.
main.dart Run the
App
CHOOSE
DEVICE
RUNNING FLUTTER APP CONT…
Debugging Flutter wirelessly
1. Connect your phone and pc wirelessly (Hotspot)
2. Add adb.exe directory to your system environmental variables.
ADB on windows is found at C:\Users\username\AppData\Local\Android\Sdk\
platform-tools
3. Open terminal (restart terminal or vs code if it is open)
4. Plug in the USB and wait for your device to be detected
5. Write the command adb tcpip 5555
6. Write the command adb connect 10.14.121.139
NB: replace the above IP address with your phone’s IP address which for most devices
can be found at settings > about phone > status
7. Unplug the usb and run the app.
“HELLO WORLD”APP
// Replace the code in the main.dart file with the following code:
import 'package:flutter/material.dart’;
void main() {
runApp(HelloWorld());
}
class HelloWorld extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Hello World App",
theme: ThemeData(primarySwatch: Colors.purple),
“HELLO WORLD” APP CONT…
home: Scaffold(
appBar: AppBar(title: Text("Hello World App")),
body: Center(child: Text("Hello World")),
),
);
}
}
UNDERSTANDING THE “HELLO
WORLD” APP CODES
Let’s understand what our code in “Hello World” App does
import 'package:flutter/material.dart’;
This allows us to use Flutter widgets from Material Library, that comes with out of
the box widgets and design and styling for our Apps.
void main() {
runApp(HelloWorld());
}
This is the entry point of our App, any flutter app begins by calling the main function
which in turn calls a runApp function that takes a widget as a root of the application.
In our case runApp calls the HelloWorld() class which is a widget we have made.
UNDERSTANDING THE
“HELLO WORLD”APP….
class HelloWorld extends StatelessWidget {
Here we create our HelloWorld Widget. In Flutter every widget must
extend either StatelessWidget or StatefulWidget class (more on this
later).
@override
Widget build(BuildContext context) {
return (
Every widget that you create must have a build method, and that method
must return another widget.
UNDERSTANDING THE
“HELLO WORLD”….
MaterialApp(
title: "Hello World App",
theme: ThemeData(primarySwatch: Colors.purple),
home:
MaterialApp (a built-in widget) wraps your app to pass Material Design-
specific functionality to all the widgets in the app.
home: Scaffold(…),
The Scaffold is designed to be a top level container for a MaterialApp.
UNDERSTANDING THE
“HELLO, WORLD”
BASICS OF WIDGETS
• In Flutter everything that appears on the screen is called a
"widget".
• We compose user interfaces by nesting widgets one inside the
other.
• Examples of Widgets
Buttons
Text
Icons
Images e.t.c
BASICS OF WIDGETS CONT…
1. MATERIAL APP
Flutter gives you a series of pre-built components to create apps embracing the typical
Android design, also known as Material Design. To use the material widget call the
MaterialApp(…) class constructor
Basic Properties (Visit https://flutter.dev to see more about MaterialApp)
Property Purpose Example
home Specifies the widget to be home: Scaffold(….)
shown, usually the scaffold.
theme Default visual properties, like theme:
colors fonts and shapes, for ThemeData(primarySwatch:
this app's material widgets Colors.blue, brightness:
Brightness.dark)
title A one-line description used by title: “Hello World App”
the device to identify the app
for the user
debugShowCheckedModeB Turns on or off little "DEBUG" debugShowCheckedModeBann
anner
BASICS OF WIDGETS CONT…
2. SCAFFOLD
Implements the basic material design visual layout structure.
To use this widget call the Scaffold(…) class constructor.
Basic Properties (Visit https://flutter.dev to see more about Scaffold)
Property Purpose Example
appBar An app bar to display at the appBar: AppBar(title:
top of the scaffold. Text("Hello World App"))
backgroundColor The color of the Material backgroundColor: Colors.red
widget that underlies the
entire Scaffold.
body The primary content of the body: Center(child: Text("Hello
scaffold. World")),
floatingActionButton A button displayed floating floatingActionButton:
above body, in the bottom FloatingActionButton(…)
right corner.
BASICS OF WIDGETS CONT…
3. TEXT
The Text widget displays a string of text with single style.
To use this widget call the Text(“Text to be shown”) class constructor. Passing the
string of text to be shown.
Basic Properties (Visit https://flutter.dev to see more about Text)
Property Purpose Example
[data (positional first The text to display Text(“Text to be displayed”)
argument)]
overflow The color of the Material overflow: TextOverflow.ellipsis,
widget that underlies the
entire Scaffold.
style Styling the displayed text i.e style: TextStyle(color:
color, font-size, font-weight Colors.blue, fontSize: 28),
e.t.c
textAlign How the text should be textAlign: TextAlign.center,
BASICS OF WIDGETS CONT…
4. IMAGE
A widget that displays an image.
Several constructors are provided for the various ways that an Image
can be specified:
new Image.asset, for obtaining an image from an AssetBundle using a key.
new Image, for obtaining an image from an ImageProvider.
new Image.network, for obtaining an image from a URL.
new Image.file, for obtaining an image from a File.
new Image.memory, for obtaining an image from a Uint8List.
IMAGE WIDGET CONT…
Image from Network:
Image.network(url)
Image from assets:
Specify your images in pubspec.yaml file first.
pubspec.yaml
flutter:
assets:
- images/cat.png
main.dart
Image.asset('images/cat.png')
IMAGE WIDGET CONT…
Basic Properties (Visit https://flutter.dev to see more about Image)
Property Purpose Example
fit How to inscribe the fit: BoxFit.cover
image into the space
allocated during
layout
height Specify height for the height: 100,
image
width Specify with for the width: 100,
image
BASICS OF WIDGETS CONT…
5. Buttons
There are several
different kinds of buttons
in flutter, below are the
most common.
Text Button
Outlined Button
Elevated Button
Icon Button
Floating Action Button
BUTTONS CONT…
Below are the sample codes for the buttons widgets
TextButton(onPressed: () {}, child: Text("Text Button")),
OutlinedButton(onPressed: () {}, child: Text("Text Button")),
ElevatedButton(onPressed: () {}, child: Text("Elevated Button")),
IconButton(onPressed: () {}, icon: Icon(Icons.settings))
FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
NB: Every button must be provided with be onPressed argument, which
is a function that performs something when the button is clicked, for now
we left it blank.
BASICS OF WIDGETS CONT…
6. ICON
The Icon widget is used displays icons. Icons are not interactive. For an interactive
icon, consider material's IconButton.
Example:
Icon(Icons.add)
Basic Properties (Visit https://flutter.dev to see more about Text)
Property Purpose Example
[IconData (positional The icon to displayed. Icon(
first argument)] NB: The list of icons can be found at Icons.home_outlined,
https://fonts.google.com/icons ),
Search for a desired and click on it the
choose flutter.
color The color to use when drawing the icon color: Colors.red
size The size of the icon in logical pixels size: 48
LAB ACTIVITY – INSTRAGRAM
POST UI, PART 1
Main Task: Develop Instagram Post User
interface.
NEXT LESSON
Topics
1. Basic Layout Widgets
- Container – Row – Column
2. Box model, Padding & Margins
3. Styling and theming.
