Play video
Flutter for Designers
23 sections - 4 hours of video
Add to favorites
Notify me
Flutter is a relatively new toolkit that makes it easy to build cross-platform apps that look gorgeous and is easy to use. By utilizing a platform's native components we'll build an app that can run on both iOS and Android that will look and feel like it was developed natively. Furthermore we'll see how with one single codebase, Flutter provides us with native performance, hot reload for fast development, and access to beautiful, native components.
Taught by Sai Kambampati
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
23 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
1
Flutter for Designers
Build a cross platform app for iOS and Android
12:09
2
Build your first Widget
Build a custom UI from scratch using Widgets in Flutter
11:16
3
Introduction to Dart
Learn the basics of programming in Dart
9:56
4
Classes in Dart
Develop sidebar items with the help of classes
10:32
5
Building a Full Screen Widget
Working on the sidebar using Column, Spacer, and CircleAvatar widgets
12:40
6
Building a Card Widget
Build a beautiful UI component using layout techniques
15:03
7
Detecting Tap Gestures
Make your app responsive by detecting tap gestures and tracking text entered into text fields
12:03
8
Stateful Widgets
Learn to pass data between different widgets
11:32
9
The List View Widget
Use the List View widget to create a new kind of scrollable UI
11:58
10
Animations in Flutter
Create beautiful animations using mixins, tickers, and actions
10:54
11
Further Animations
Pass data through animations
10:51
12
Flutter Packages
Tap into the extensive Flutter community and add a sliding panel widget
10:50
13
Adding Cards to our Sliding Panel
Next multiple widgets within one another
11:57
14
Creating Dynamic Widgets
Use functions to dynamically generate widgets
12:07
15
Navigation in Flutter
Transition between screens using routes and run platform specific code
11:52
16
Animations with the Hero Widget
Magically transition between views using similar elements
12:34
17
Building the Course Screen
Use a scrolling view widget to display multiple lines of text
10:51
18
Manually Control the Panel Widget
Display our course sections screen with the help of a sliding up panel
11:09
19
Creating a Vertical Scrolling List
Build the Course Sections Screen with a List View widget
11:57
20
Making the Profile Screen
Utilize Navigator to Segue to the Profile Screen in our app
11:34
21
Populating the Profile Screen
Add our name, profile picture, and badges to the Profile Screen
10:32
22
Utilizing Widgets across Multiple Screens
Add our custom CertificateViewer widget to the Profile Screen and modify our Continue Watching Card Widget
8:39
23
Setting Custom App Icons
Learn to set the app icon for your Flutter application in both Android and iOS
9:50
Learn by doing
What you'll build
Redesign your existing app or start from scratch as you follow along and learn the techniques.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.
Video files
Download the videos so that you can watch later or offline using any video player.
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Sai Kambampati
Student. Engineer. Designer. Not always in that order.
Student at UCSC constantly learning about new technologies, building innovative mobile apps, and designing breakthrough products.
6 courses - 24 hours
Jetpack Compose for Designers
Learn the fundamentals of Jetpack Compose to build a beautiful Android application using Kotlin and Android Studio
4 hrs
UIKit for iOS 15 Part 2
Learn advanced techniques about animations, layout, localization, Firebase, Xcode Cloud, and more!
3 hrs
UIKit for iOS 15
Design and code a UIKit app for iOS 15 with storyboards, custom layouts, scroll detection, and accessibility using Xcode 13
5 hrs
Advanced Development in SwiftUI
Advance your SwiftUI skills by developing an app using Core Data, CloudKit, In App Purchases, Sign In With Apple, and Firebase Authentication
4 hrs
Flutter for Designers Part 2
Continuing on from the previous Flutter for Designers course, this course has a heavier emphasis on using Firebase API's to combine Firebase and Flutter. There will be a lesser emphasis on creating front-end Flutter UI and more emphasis on how to build functional applications capable of being shipped to the App Store. A review of the previous course and the Dart programming language will be very helpful. That being said, you will also be introduced to some new Flutter widgets and packages.
4 hrs
Flutter for Designers
Flutter is a relatively new toolkit that makes it easy to build cross-platform apps that look gorgeous and is easy to use. By utilizing a platform's native components we'll build an app that can run on both iOS and Android that will look and feel like it was developed natively. Furthermore we'll see how with one single codebase, Flutter provides us with native performance, hot reload for fast development, and access to beautiful, native components.
4 hrs
Flutter
Certificate
Figma
Certificate
SwiftUI
Certificate
UI Design
Certificate
Create a profile
Get certificates
After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.
Pass the test
Get the certificate.
Test your knowledge of Flutter. Complete the course and get perfect results for this test to get your certificate.
Flutter: Question 1 out of 19
Flutter can be used to create applications for which of the following platform(s)?
Stories
How students learned from our courses
See what people have learned and built by taking courses from Design+Code
Artem Adams
Artchitect at IBM
Artem Adams
Artchitect at IBM
Learned a lot from your course to port my app from #AppleWatch to #iPhone, #iPad and #Mac. All SwiftUI, one code base, iCloud, learn words with Widgets.
Ángel Vāzquez
UI-X interaction & design
Ángel Vāzquez
UI-X interaction & design
I can’t thank you enough @MengTo, thank you for making the whole process so enjoyable. This is the beginning of a new era for me thanks to you I found my passion and what I want to do for the next following years. Red heart
Jiani Li
UI/UX Designer/Developer
Jiani Li
UI/UX Designer/Developer
Bucket is now live in @AppAirport! Thanks to @designcodeio by @MengTo, I was able to learn #SwiftUI and built the app in 2 months.
Haawa
iOS Developer
Haawa
iOS Developer
Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the design lessons and many controls and animation that I used from you SwiftUI course. Man bowing deeply.
Andy Barnes
Product Designer working in London
Easy to follow but incredibly insightful tutorials. Makes learning new software and techniques and real pleasure everyday! Keep up the good work. 👏
Kushal Bhanot
Front-end Web & iOS developer
I've never been more excited about designing applications. Meng is by far, the best educator that I've ever found. His minimalist approach is both easy-to-understand and complete at the same time. I highly recommend!
