Design+Code logo

Quick links

No results found

Suggested search

play icon

Play video

Flutter for Designers

23 sections - 4 hours of video

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.

Instructor avatar

Taught by Sai Kambampati

Purchase includes access to 30+ courses, 100+ premium tutorials, 120+ 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.

check

Design template

check

Source code for all sections

check

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.

120+ hours of video

120+ hours of video

Subtitles in English, Chinese

Subtitles in English, Chinese

Source files, ePub

Source files, ePub

UI, icons, illustrations

UI, icons, illustrations

Premium, support chat

Premium, support chat

Source files

Source files

Design templates and source code files are included to help you learn.

ePub files

ePub files

Read offline using Books for iOS, Mac or other apps that can read this format.

Video files

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.

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

Author avatar

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.

Christiano Mere

Designer

Author avatar

Christiano Mere

Designer

My studies of swiftUI with a little help and inspirations of @designcodeio and @MengTo. Thanks for the today's live. Illustrations by @FireartStudio

Haawa

iOS Developer

Author avatar

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.

Ángel Vāzquez

UI-X interaction & design

Author avatar

Á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

Rachel Nelson

Mobile developer

Your first book was extremely helpful for me because, like yourself, I also started off as a pixel-pusher and I liked to make things look pretty without thinking too much of how design really functions. Your book has really helped me to fine-tune my skills in design!

Jean-Marc Denis

Product Designer at Facebook

Design+Code is a wake-up call. Why should I learn a web based technology or a deprecated tool when the obvious choice is to learn Xcode?

Trusted by teams

80,000 people

Many startups look for designers who code and developers who design. They use our courses to help train new hires and expand skill sets.