Design+Code logo

Quick links

No results found

Suggested search

In this section, we will create the navigation bar for our home page by using the widgets RawMaterialButton, TextField, Icon, and CircleAvatar. We'll also learn how the GestureDetector widget can be used to detect taps and run code when gestures are recognized.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

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

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

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.

icon

6 courses - 24 hours

course logo

Jetpack Compose for Designers

Learn the fundamentals of Jetpack Compose to build a beautiful Android application using Kotlin and Android Studio

4 hrs

course logo

UIKit for iOS 15 Part 2

Learn advanced techniques about animations, layout, localization, Firebase, Xcode Cloud, and more!

3 hrs

course logo

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

course logo

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

course logo

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

course logo

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

Test your knowledge of Flutter. Complete the course and get perfect results for this test to get your certificate.