Build A Flutter Stopwatch App With Custom Ui And Animations

Build A Flutter Stopwatch App With Custom Ui And Animations
Last updated 12/2021
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz

Learn how to use Flutter tickers, matrix transforms, and other custom widgets to build a clone of the iOS Stopwatch app

What you’ll learn
Learn about how to create performant Flutter UIs that update every frame at 60 fps
Work with custom Flutter layout widgets: Stack, Align, Positioned, AspectRatio, LayoutBuilder, Transform
Work with matrix transforms (scale, rotate, translate) to create custom Flutter UIs
Build a clone of the iOS stopwatch app
Requirements
You should already have the Flutter SDK installed (2.0 or above) and an IDE configured for Flutter development
You can use the Android Emulator (on Windows) or iOS Simulator (on macOS) for development
Description
Overview

Section 1: Flutter Stopwatch App Challenge

Lecture 1 Course Introduction

Lecture 3 Dark Mode and Custom System UI Overlay

Lecture 4 Creating a periodic Timer

Lecture 5 Ticker and TickerProvider

Lecture 6 Creating a separate StopwatchRenderer widget

Lecture 7 Sizing the Stopwatch UI with AspectRatio

Lecture 8 Matrix transforms

Lecture 9 Getting the circle radius from LayoutBuilder

Lecture 10 Implementing the animated clock-hand

Lecture 15 Performance considerations and completed project

Lecture 16 BONUS Lesson & Next Steps

Flutter developers looking to build custom layouts and time-based animations