OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
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:
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.
In this section will complete a UI challenge and build a stopwatch application.
The two most important topics we will cover are tickers and matrix transforms.
- Tickers are at the foundation of the Flutter animation framework. By learning what they are and how to use them you'll get a much better understanding about how animations work under the hood.
- When you build custom UIs with animations, you'll often need to translate, rotate or scale widgets on screen. Matrix transforms are key in understanding how to do this.
We'll also get some practice working with widgets such as Stack, Align, Positioned, AspectRatio, LayoutBuilder, and cover a bit of state management.
Save
Builds a functional stopwatch app.
Clear explanations of Tickers and Transforms.
Deep dive into custom UI and animations.
SaveOpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
