MAD9135
Flutter Apps

9.2 Introduction to Flutter

Module Still Under Development

# Widgets

Building things with Flutter means working with Widgets and Elements. Widgets are the elements that we use to create our app screens in code. Elements are what gets rendered from the Widgets. Conceptually you can think of the Widgets as similar to the React Native Components we already used.

Widgets can be:

  • Widgets for structuring elements such as a list, grid, text, and button
  • Widgets for input elements such as a form, form fields, and keyboard listeners
  • Widgets for styling elements such as font type, size, weight, color, border, and shadow
  • Widgets to lay out the UI such as row, column, stack, centering, and padding
  • Widgets for interactive elements that respond to touch, gestures, dragging, and dismissible
  • Widgets for animation and motion elements such as hero animation, animated container, animated crossfade, fade transition, rotation, scale, size, slide, and opacity
  • Widgets for elements like assets, images, and icons
  • Widgets that can be nested together to create the UI needed
  • Custom widgets you can create yourself

Widget Catalog (opens new window)

Dev Tool reference (opens new window)

Cookbook with solutions to common issues (opens new window)

Starting Flutter for Web Devs (opens new window)

By default, the Flutter app uses Material Components widgets based on Material Design.

Similar to React, there are two main types of widgets, StatelessWidget and StatefulWidget. A stateless widget is used when the values (state) do not change, and the stateful widget is used when values (state) change.

# Setting up for iOS Devices

In order to test our Flutter apps on physical iOS devices there are a number of things that we need to do.

Apple really wants to be sure that you: own an iOS device; own a MacBook with the latest version of XCode; have paid for an Apple Developer account;

To address all that you need to follow the below steps.

  1. Join the Algonquin College Media & Design Apple Developer Account

You would have been sent an email to your @algonquinlive email address that includes a link to click to accept the invitation.

You will need to create an Apple ID with your @algonquinlive email address BEFORE you accept the invite. Follow this link (opens new window) to learn how to create a new Apple ID.

Be sure to accept he terms of service.

  1. Send the UDID from your iOS device to Steve so that it can be added to the account.

To find your device UDID, the best way is to connect your iPhone to your MacBook Pro with a USB cable. Click on the Apple Icon and open your MacBook About This Mac, and then click the System Report button. In the report window, select the USB entry on the right. Then in the top panel find your iPhone. In the bottom area you will find the UDID to email to your instructor.

  1. Create an iOS developer certificate with the Keychain Access program and the Apple Developer website.

This is the most complex part of the process. Watch this video to learn how to create your developer certificate.

iOS developer certificates

  1. Download the mobile provisioning profile file from the Apple Developer website.

Your instructor will be the one who generates the mobile provisioning profile file. You will just need to download it andd double click on it to open it which will open it in XCode.

# Dart Programming Language

The language that we use for building Flutter apps is called Dart.

Official Dart website (opens new window)

# Basic Project Code

When you use the flutter create command, you will get a new Flutter project that has a default /lib/main.dart file. This is the main entry point for your file.

The top of this file will always be the same two things - an import of the material.dart file and the main() method which starts your application running.

import 'package:flutter/material.dart';

void main() => runApp( MyApp() );
//the name MyApp can be anything but it needs to match your initial
// StatelessWidget
1
2
3
4
5

The runApp() method inside your main() method is built in. It calls your first stateless or stateful widget to start building your app interface.

Inside our MyApp class we need to have the build method that returns a MaterialApp() widget. This is where our app interface being created. See the code sample below

Each Widget that we add to our app will have a series of pre-defined properties like child, home, body, or title. The values of these properties are usually a string, a boolean, a number, or a new Widget.

The nesting of these Widgets creates what is known as the Widget tree. Flutter converts the Widget tree into the actual Elements that appear on the screen. You will hear references to the Widget Tree and the Element Tree in the notes. Just remember that the Widgets are the Classes and configurations and the Elements are the actual things that appear on the screen.

Try typing stless in the code screen to make the code completion menu appear. Select the Stateless Widget option from the list to make the empty code that looks like our code below appear.

It will have two cursors blinking so you can add the name MyApp in both places.

Replace the Container widget with a MaterialApp one. Give it one property called home and set it to HomeScreen(), just like in the code below.

//look for this class
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  // Every widget has a build method which gets used to create the
  // actual Element that is shown on the screen.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(), //Home page for our Flutter app
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

If you want to get rid of the red debug banner on the top right corner, add this additional property inside the MaterialApp method call.

debugShowCheckedModeBanner: false,
1

If you wanted, you could create your entire Flutter App inside the main.dart file. However, most apps have multiple screens. So, it makes more sense to split each of these into their own files.

Inside your /lib folder, create another folder called screens. Inside that, create a new file called home_screen.dart. This will be where we create the Widget called HomeScreen that you see set as the value for the home property inside the MaterialApp() widget above.

We do not need to pass any parameters to this widget but you could if you wanted.

Inside our new home_screen.dart file we need to add the import command just like in the main.dart file.

Then use the stless macro again and select the Stateless Widget again. This time give it the name HomeScreen to match what we set as the value for the home property in the MaterialApp widget.

The build method in this file will contain a Scaffold widget. The Scaffold widget will contain an appBar and a body property.

Copy the following as the contents for your HomeScreen class.

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //leading - lets you add a button to the left side
        title: Text('The App Title'),
        //actions - lets you add action buttons on the right side
      ),
      body: SafeArea(
        //SafeArea deals with the notch at the top of iPhones
        child: Center(
          //Center will center it's child Widget vertically and horizontally
          child: Text('Hello'),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

The last step is to go back to the main.dart file and add an import statement that will import the HomeScreen class into the main file so it can be used as the body property value.

The process of splitting out the code for things like AppBar and BottomNavigationBar widgets into separate files, is recommended for any Widget that you are going to reuse in multiple pages.

When ready to test our app we should launch the iOS Simulator and/or an Android emulator. After you have launched one or both of these, look in the bottom bar of VSCode. You should see a section that says something about Chrome, ios or android. If you click on that text you will be given a list at the top of the screen where you can choose your target for loading your app.

With your target device selected, make sure that the main.dart file is selected in the code editing panel, and look for a button to the top left that looks like a play button with a small insect on it. This is the run and debug button. Clicking this will launch your app in the Simulator / Emulator.

# Main Points to Remember

When building your Flutter Apps, here are a few things that you can remember.

  1. All your .dart files will be inside your /lib folder.
  2. At the top of each .dart file you will import needed packages and files to use.
  3. All your .dart files will need import 'package:flutter/material.dart'; as the first import.
  4. To start your Flutter app running you will need a main method: void main() => runApp( MyApp() );.
  5. The name of the class that you put inside the runApp() method is the entry point to your app.
  6. Everything that we build in our Flutter App will be a Widget nested inside another Widget.
  7. Code completion in VSCode and Android Studio is your friend. It will give you a list of possible properties for every Widget.
  8. The naming of the built-in Widgets is excellent.

# What to do this week

TODO Things to do before next week

  • Read and Watch all the course content for 9.1, 9.2.
  • Make sure that you can run flutter doctor and have all the needed supporting features installed
  • submit Hybrid 4 (the final Dart Hybrid exercise)
Last Updated: 10/29/2023, 10:43:19 AM

← 10.1: Assets and Colours →