Flutter: The Profiler (Part 3)

Gepostet am: 25. Februar 2019

Previously, I gave a brief introduction to the core concepts and setup of Flutter. I showed the general structure of a Flutter project and some implementation examples for:

  • Responsive UI
  • In App Navigation
  • Persistence (internal device storage)

The next step will be to build a prototype application in Flutter with Dart. As this is a longer procedure, I will split this project into at least two articles. This will reduce the code overload per article to a minimum and therefore will make the articles easier to follow and easier to understand. At the end of the article, you will find a link to the GitHub repository that contains the present stage of the application.

The App

I will follow the simple „analyze, design and implement“ pattern. This will help to avoid unnecessary drawbacks for unsupported features and provide us with a clear vision of the final application.

Step 0: Wording

  • Pages: UI representations of a specific application state
  • Widgets: Standard & custom widgets as per the Flutter Widget Catalog
  • Navigation: Process of switching pages (In App routing)

Step 1: Analyse & Research

Let’s get started by defining what kind of Futter application we like to build. As shown in the diagram below, we are going to implement a simple general/detail app. This is a common structure and can easily be adjusted to various use cases.

Basic Structure Diagram

Basic Structure Diagram

The given structure will be our guide to lean on during the implementation. We can use it to search for appropriate widgets and we can draw conclusions for the state management from it. This sounds complicated for starters like myself, but I will run you through the whole process and try to keep it as simple as possible.

Step 2: Design & Feature Definition

The basic structure of the app demands some specific setup, features and widgets.

DesignFeaturesWidgets
2 Pages (General / Detail)Responsive LayoutGrid (catalog)
In App RoutingCustom IconStandard (catalog)
Assets (Images, Icons …)Hero AnimationCustom (built by us)

 

To keep this project simple, we will keep the the app theme as it is and only set different colors to the desired widgets. Therefore, we don’t need to create a full scale custom theme.

As I go through the implementation, I will introduce each required widget. I will start with the structure widgets and go through various kinds of other widgets, up to the standard widgets (Text or Buttons).

Design

The general page should show a grid of images that are loaded from the project’s assets directory, the image will be the interface of the details page which will contain functionality of a navigation between pages, while the expandable text widget, located below the image, is optional. Feel free to include it and share your experience in the comment section.

Each page should have a top app bar and a bottom app bar. In case we want to extend the project later, this would be the section where you set buttons. The overall look of the page can be derived from the basic structure diagram.

Features

The responsive layout will be achieved with the MediaQuery.of(…) function as described in the previous article. Custom widgets will be built as a combination of standard widgets. Heros are also included in that process. In the end, the custom icon is a standard task that will be accomplished with a third party library.

Step 3: Setup & Implementation

Select an IDE of your choice and follow the steps at the Flutter.io website in order to create your first project. Which IDE you use doesn’t matter because the project structure is the same for each.

We will start with the project setup and the import of all assets and libraries. Then, we will create our first widgets, the General widget and the DetailsPage widget.

Setup & Import

1. A new Flutter project has been created  

The lib  directory contains only the main.dart file.

2. Create an assets folder in the project’s root directory ()
Assets Directory

Assets Directory

3. Add assets to the asset directory

Choose a bundle of images that you want to be displayed at the GeneralPage and paste them into the assets directory with right click and paste operation.

4. Add assets to the pubspec.yaml file

The pubspec.yaml file manages all assets, third party libraries, and the Flutter SDK setup. The assets have to be listed under the section flutter/assets and most importantly you have to follow the spacing convention as shown below.

Assets

Assets

5. Add third party library to the pubspec.yaml file

Find section dev_dependencies, add the package flutter_launcher_icons and the parameter flutter_icons as shown below. If you have chosen an image as your icon and imported it correctly, you can run the CL commands mentioned below in your project’s root directory. This will set the given image as the icon of your application.

Test your application with the CLI commands flutter packages get  and  flutter run  to make sure that all packages have been imported correctly.

General & Details Page

The basic setup of the entire app is completed. Now we will have to design and connect widgets.

1. Create new Dart file GeneralPage.dart in lib directory
New Dart file

New Dart File

The Dart file will wrap the widget with the corresponding state in one file and can later be accessed via the Navigator.

2. Generate new Stateful Widget in GeneralPage.dart

Create a stateful widget, either as described in the official documentation or with the shortcut stful . stful  will create the complete logic of a nameless stateful widget. Continue by setting the name of that widget to match the file name of the page.

HINT: Type stful  to create the logic for a Stateful Widget.

 

 3. Create new Dart file DetailsPage.dart in lib directory

Repeat step 1 and create a new Dart file called DetailsPage.   

4. Generate new Stateful Widget in DetailsPage.dart

Repeat step 2 and create a new stateful widget called DetailsPage.

Each state widget of both pages returns a placeholder (new Container()). Besides this, the placeholder will be replaced with our custom widgets later. As soon as you have completed step 4, your lib  directory should contain three Dart files:

  • main.dart
  • GeneralPage.dart
  • DetailsPage.dart

Execute CLI command flutter run in the project root directory and check for compiling errors.

If your application runs without errors, you can proceed by implementing the core structure. Start with main.dart and define the structure in both page widgets.

main.dart

As we learned in the previous article, the main.dart file returns the root widget of the project. In the root widget we declare the home widget (the first widget to start) and other attributes like the title (this.title) of the app.

GeneralPage.dart

As seen in the basic structure image, the GeneralPage widget serves as the home widget. The home attribute in the context of Flutter describes the first widget that will be built directly after the root widget. In order to get a predefined strutted app in Flutter we take advantage of a Scaffold widget.

scaffold widget

This structural widget will be returned by the build function to the state widget (GeneralPageState) of the related page (GeneralPage).

The Scaffold widget has many attributes, but for this project I will only use the appBar, the body and the bottomNavigationBar. All of these attributes will be addressed with the next part of this article series. For now I recommend to set a placeholder (new Container()).

DetailsPage.dart

The implementation of the DetailsPage widget is equal to the GeneralPage widget. Continue with the exchange of the new Container() placeholder, in the  _DetailsPageState class, with the defined Scaffold widget. Both pages should now contain an equal implementation of a Scaffold widget in the related state class.

Recap

We have started to create our first Flutter application. It consists of two pages, the General– and the DetailsPage. All necessary assets and third party packages are imported in the pubspec.yaml file. Furthermore, an additional assets directory has been added to the root project directory. The assets directory should contain images to populate other widgets at a later stage of this project. The course is set for the next steps:

In the next article: „Flutter: The Finalizer! (Part 4)“, I will finalize the prototype profile app. Feel free to have a look at the Github Repository and share your opinion!

All articles in this series

Read on

Flutter Medium Blog

Find out more about our Android and iOS portfolio or join us as a mobile developer!

2019-03-21T16:51:23+00:00

3 Kommentare

  1. […] Flutter: The Profiler (Part 3) […]

  2. […] Previously we have created the basic structure of the Flutter application by defining the GeneralPage and the DetailsPage. In this article, I will concentrate on routing, layout, animation and data sharing. […]

  3. […] Flutter: The Profiler (Part 3) […]

Hat dir der Beitrag gefallen?