Building a Multi-Page Application with Dart's Flutter Mobile Framework

What Will I Learn?

• You will learn how to build out Multi-page Applications with the Dart Flutter Framework
• You will learn how to use the Flutter Navigation Widget to Pop and Push Routes out of memory
• You will learn how to make use of the Flutter Outline tool, Flutter Inspector Tool and the Flutter Studio Tool
• You will learn how to make use of some of the new Dart 2 features inside of the Flutter Framework

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

• Intermediate

Description

In this tutorial on the Flutter Framework, we build out a simple application that makes use of Multiple Pages/Panes. We make use of the Native Flutter Router, the Flutter Navigator Widget, instead of using a third party library like Fluro. We do this to demonstrate how simple it can be to create Multiple Panes in a Flutter User Interface. We also look at some of the many tools that exist for the Flutter Framework such as the Flutter Outline Tool and the Flutter Inspector Tool. We take a look at the third party Flutter Studio tool which allows you to drag and drop elements and widgets into a screen to auto-generate a flutter layout.

For this project, we use the Dart 2.0 SDK preview build as well as the Flutter SDK preview build to showcase some of the new features that are being worked on for the Dart 2.0 release. The application itself just consists of three different pages, each with a single button centered in the middle of the page. Each button moves the application from one page to another and there are buttons in the AppBar which allow the user to move backwards. We manually implement out own AppBar action to allow us to go backwards as well.

For information on installing and using the Flutter SDK preview build go here

To check out Flutter Studio click here

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial

---

Posted on Utopian.io - Rewarding Open Source Contributors

---