This is the second part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Hot reload is a time saver for viewing changes in your mobile app. You'll wonder how you worked without it.
TL:DR – Start by following the instructions in Getting started with Flutter on a Mac and then you'll be able to complete the tasks in this article.
Contents
- Material Components for Flutter
- Understanding the Widget tree
- Widgets in the Render Tree
- Adding an image asset and caption
- Enabling local image assets in Flutter
- Add or uncomment and edit the
assets:
section to define the static images folder. - Editing the appBar title and adding an action
- Edit the appBar: section
- Run the app project on your devices
- Output should be similar to this (more lines though)
Material Components for Flutter
Material Components for Flutter (MDC-Flutter) is included by default in Flutter's packages. Import the material.dart
file to access the widgets. Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences. Material Components for Flutter is developed by a core team of engineers and UX designers at Google to support beautiful and functional Android and iOS apps.
To get familiar with the editing and development tools, lets extend the starter app code by adding an image with a caption, and giving the appBar a better title and an action. It will become the temporary first on app launch from cold start and comprises:-
- a better appBar title and an appBar action which will be used to launch a login page,
- an image for the screen - moved closer to the top with a caption.
The Starter app puts all the scaffolding in place for our cross platform Flutter based app. The MDC-Flutter capabilities are provided by import 'package:flutter/material.dart';
. There is already an appBar, a body and a floatingActionButton. You can see them in the code, and also in the Flutter Inspector in Android Studio.
Understanding the Widget tree
The Widgets are the building blocks of a Flutter apps functionality. The Widget tree in Android Studio provides a convenient visualisation of them and a way to navigate the source code effectively. The tree represents a hierarchy, and you can see our widgets in the screenshot under the Scaffold
part of the hierarchy.
Open main.dart
and scroll to find the widgets being used.
Widgets in the Render Tree
...
appBar: AppBar(
...
floatingActionButton: FloatingActionButton(
...
In Android Studio you can expand by selecting Flutter Inspector from the right hand side of the window. Selecting the widget in the inspector will navigate to it in your code.
Adding an image asset and caption
The Image class in Flutter displays an image. It has several constructors which deal with various ways that an image can be specified. This image is an 'asset' which will be provided in the app itself. Of course you could use a different constructor to fetch the image from a URL, from the filesystem or from memory.
Local image assets must be specified as part of the project and are good for logos or branding. Create the directory for the images using Android Studio or in the terminal with mkdir assets
in the project folder. Keep in mind that the paths for the assets are relative to the directory that contains the pubspec.yaml file).
Copy your desired images into this folder and reference them in the pubspec.yaml file. The -
is a required part of the structure. You can specify the filename after the relative path or just the directory name with a trailing /
to enable all images in the folder to be used in your application.
Add the name of the project as a text child to the column
You can read more about Assets and Images in the flutter documentation.</p
Enabling local image assets in Flutter
Add or uncomment and edit the assets:
section to define the static images folder.
flutter:
assets:
- assets/
The image Image.asset('assets/yourimagename.png')
is in the folder so it is eligible to be loaded.
Add a spacer using a SizedBox(height: 12.0),
then edit the text in the widget about pressing the button to be your caption.
Editing the appBar title and adding an action
An app bar provides a toolbar using the appBar class which displays the page title and supports actions, often represented with IconButtons on mobile phones.
Edit the appBar: section
appBar: AppBar(
title: Text(widget.title),
actions: [
IconButton(
icon: Icon(
Icons.info_outline,
semanticLabel: 'Login button',
),
onPressed: () {
print('Login button');
},
),
],
),
Edit the title of the appBar, and add an actions widget to define the icon. the semanticLabel
provides accessibility information. The onPressed
property is mandatory so use a print statement for now.
You can use any of the icons provided by MDC-Flutter. Theres a helpful list of them here, and they also appear in Android Studio as you type Icons.
Run the app project on your devices
In the terminal change into the project folder. cd nameofyourproject
Output should be similar to this (more lines though)
Running Gradle task 'assembleDebug'... Done 39.3s
✓ Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk... 13.2s
The image and caption, and appBar with an action should now display in your MDC-Flutter app. They don't look right yet. The colours are the default. The AppBar action isnt themed, the logo is too 'large to mean anything but it proves an image can be added as an asset. These will be improved in the next articles.