Amazon.co.uk Widgets

This is the second part of my journey to build and publish a Flutter based app for the App Store and Google Play.

Contents

  1. Material Components for Flutter
  2. Understanding the Widget tree
  3. Adding an image asset and caption
  4. Enabling local Assets
  5. Editing the appBar title and adding an action
  6. Run the app project on your devices

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. 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.
Widgets in the Render Tree

    ...
    appBar: AppBar(
    ...
    floatingActionButton: FloatingActionButton(
    ...
Flutter Inspector from Android Studio displaying the Widget Tree with the Scaffold open and the widgets displayed indented from the Scaffold

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 Imagesin the flutter documentation.

Enabling local Assets

Open pubspec.yaml
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.


Open main.dart
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

flutter run -d all or in Android Studio press ^R or select the run button from the toolbar.
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.

Flutter Material Components iOS Starter App 002   Flutter Material Components Android Starter App 002