Building a Hero Animation and an Application Drawer in Dart's Flutt...

What Will I Learn?

You will learn how to implement a Drawer in Flutter
You will learn how to use multiple files in a Flutter project
You will learn how to make use of a Hero Animation
You will learn how to import and make use of assets in a Dart/Flutter project

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 video tutorial, we look at a bunch of different concepts inside of the Flutter Framework. We look at hero animations, application drawers, how to import and use locally stored Image files and how to split a project into multiple files and modules. Our application makes use of a simple routing system and is connected to an application drawer that is visible on the home page. This application drawer lets us navigate from the home page to any other page in the application by way of the route system. This drawer also has an about object field which displays a small box with information regarding the development of the application.

There are three different pages in this application; each of the pages has a hero widget in the middle with a hero Widget with a image embedded in it. Each page also resides in its own namespace and module file. The Hero Widgets of each of our pages have different sizes and shapes which is what helps to creates the hero animation. In Flutter a hero widget allows the user to pass an object from one page to another in a persistent manner. In this way we can make our image look like its transforming from one page to the next without it being re-rendered.

The source code for this project can be found here

Video Tutorial

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Building a Hero Animation and an Application Drawer in Dart's Flutter Framework