Build a Flutter Stopwatch App with Custom UI and Animations

Focused View

Andrea Bizzotto

1:09:32

110 View

1 - Course Introduction.mp4

01:34

2 - Starter project for the Stopwatch app.mp4

02:35

2 - stopwatch-flutter.zip

3 - Dark Mode and Custom System UI Overlay.mp4

01:47

4 - Creating a periodic Timer.mp4

04:59

5 - Ticker and TickerProvider.mp4

05:44

6 - Creating a separate StopwatchRenderer widget.mp4

02:30

7 - Sizing the Stopwatch UI with AspectRatio.mp4

02:34

8 - Matrix transforms.mp4

07:26

9 - 09.circle-radius-layout-builder-notes.pdf

9 - Getting the circle radius from LayoutBuilder.mp4

03:34

10 - Implementing the animated clockhand.mp4

06:52

11 - Completing the stopwatch UI part 1.mp4

06:15

12 - Completing the stopwatch UI part 2.mp4

07:40

13 - Adding the startstopreset functionality part 1.mp4

05:03

14 - Adding the startstopreset functionality part 2.mp4

05:15

15 - Performance considerations and completed project.mp4

04:56

15 - stopwatch-flutter-finished.zip

16 - BONUS Lesson & Next Steps.mp4

00:48

Description

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

Who is this for?

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

What You Need to Know?

You should already be familiar with the Dart language and how to build simple Flutter apps

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

More details

Description
Want to learn how to build completely custom and performant UIs in Flutter?
This practical course will teach you exactly that, by showing you how to create a clone of the iOS stopwatch app from scratch.
As part of this, you'll learn about the foundations of the Flutter animation framework and build a completely custom UI using:
Ticker and TickerProvider
Matrix Transforms
Stack, LayoutBuilder, AspectRatio, and other layout widgets
Would you like to:
build UIs that render every frame, in sync with the screen refresh rate, and without compromising performance?
rotate, scale, or translate widgets, and combine them all together to build custom UIs?
Then you've come to the right place.
This course is short and to the point. But it will give you valuable knowledge and a few tricks that will come handy in your future Flutter projects.
What does the completed project look like?
Go check the video preview for a complete overview of the project you'll build in this course.
Other things included in the course:
- How to switch betwen light and dark mode
- How to manage the stopwatch state and start, stop, and reset the timer
- How to optimize the application performance
- How to build modular code by creating small, reusable widgets
- A final challenge to test your knowledge

Frequently Asked Questions
Will we use Flutter 2?
Yes! The entire course uses Flutter 2 with Null Safety and I will keep it up to date.
What are the course prerequisites?
You should be already familiar with StatelessWidgets and StatefulWidgets, common layouts (Row, Column, Stack), and the foundations of state management in Flutter.
Who this course is for:
Flutter developers looking to build custom layouts and time-based animations

User Reviews

Rating

average 0

Total votes0

Focused display

Google Flutter

Andrea Bizzotto

Instructor's Courses

I have extensive experience in mobile app development, having built complex apps for various clients and as an independent developer. I'm passionate about open source, teaching, and all things Flutter. In 2018, I started Code With Andrea, along with a YouTube channel and a blog, where I regularly share new articles and videos. All my learning materials have been very well received by new students and the Flutter community.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.