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

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

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework
• The Basics of Animation with Dart's Flutter Framework
• Advanced Physics Based Animations in Dart's Flutter Framework
• Building a Drag and Drop Application with Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---