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.
About this Course
Much like SwiftUI and React, Flutter uses a declarative UI making it one of the best frameworks for rapid design and development. This is why this course was designed for both designers and developers. We'll explore how to create apps for both major mobile operating systems, Android and iOS, with Flutter and its easy-to-learn Dart programming language. This course is beginner-friendly and will help you dip your toes into the ever-expanding ocean that is Flutter. We've packed this course with design tricks and efficient workflows to help you build great user interfaces in record time.
The design file is in Figma, project assets, and Flutter source code is shared with you so that you can compare against your own progress.
While this course is beginner friendly, it will help to have some programming experience, especially one utilizing a declarative UI. If you're coming from a SwiftUI or React/React Native background, then you should find Flutter and Dart really easy to understand.
In this course, I am running a beta of macOS Big Sur and Xcode 12, as well as Android Studio 4.0.1. Luckily, Flutter has been around for quite some time so it is not required that you use beta applications as I'm sure macOS Catalina and Xcode 11 will work just as well. We'll be using Android Studio to develop our Flutter app so I will guide you in downloading each of the above applications as well as the Flutter and Dart SDK.
If you're on a Mac, Xcode is a great tool to have. It will give you access to the Command Line Tools that are crucial for bridging Flutter to iOS. With Xcode, you will also get access to the iOS Simulator, a handy tool to see how you Flutter app will perform. You can download Xcode from the App Store.
Install Android Studio
Android Studio is available for both macOS and Windows users. For Mac users, I recommend downloading Android Studio even if you have Xcode and VSCode installed. When developing with Flutter, Android Studio provides a list of handy shortcuts to speed up your workflow, access to Android Virtual Devices, and a deeper insight to your app's performance and layout.
To install Android Studio, you can download the app from the Android Developer website at https://developer.android.com/studio. You'll see download options for your respective system, either Windows, macOS, Linux, or Chrome OS.
When you first open Android Studio, you'll be asked to install the Android SDK along with some other plugins to help with development. You should follow the instructions Android Studio gives you as these plugins and programs will be helpful for future Android development.
Installing the Flutter SDK
Before starting, you'll need the Flutter and Dart SDK to create cross platform apps. To install Flutter, head over to Flutter's installation page where you can follow the instructions and download the SDK relative to your system. For Mac users, it's simpler to install using the Terminal.
Open Terminal and type:
git clone https://github.com/flutter/flutter.git
This will create a new folder called flutter_dev and clone the Flutter SDK into the folder.
Once the repository has been cloned, open the flutter_dev folder and navigate to flutter > bin. Copy the path to the bin folder.
Heading back to Terminal, type:
This opens an "rc" file that your Terminal uses when issuing it commands. Press "I" to go into Insert Mode, scroll all the way to the bottom, and at the end of the line, press enter a couple of times to give some space between the end of the "rc" file and the following line where you will type:
Press the colon button, "wq", and the Enter to save and quite the rc file. This tells terminal where your Flutter SDK is located.
Now, open a new window in Terminal and issue the flutter command. This should have Terminal start to download and install the Dart SDK. After the installation is complete, type flutter —version to verify that everything is working.
Linking the Flutter SDK to Android Studio
Open Android Studio and on the startup screen, press the Configure button at the bottom, and select SDK Manager. In the new window that opens up, select Plugins from the sidebar, and with the Marketplace tab selected, search for Flutter. The first result should be the one we're looking for. It should come from flutter.dev. Click on the Install button and Android Studio will alert you letting you know that the Dart plugin will be installed as well. Select Install and after a couple of seconds, select Restart IDE.
Creating your first Flutter project
On the startup screen, there should be a new option called Start a new Flutter project. Select that button and select Flutter application as your template. After clicking Next, you should be taken to a screen where you can configure your Flutter application.
Under Project Name, put designcode, and make sure that the Flutter SDK path matches the path where you installed the Flutter SDK. Android Studio should automatically detect this but it's good to verify twice. Select a Project Location to save your project and you may optionally set a Description. When you're satisfied with your configuration, press Next.
Finally, you will be asked to set the Package Name. If you're coming from iOS development, the package name is similar to the bundle identifier. I am setting mine to io.designcode.designcode. Making sure that all the AndroidX and Platform channel language checkboxes are selected, click on Finish to have Android Studio create your Flutter project.
Exploring the Sample Application
When the project opens up, you'll see that you are in a file called main.dart. On the lefthand side, you will see a sidebar. This sidebar will contain all of the folders and libraries associated with your Flutter project. Opening the designcode folder, you'll notice that there are many folders underneath it. The iOS folder indicates the backend Flutter code that helps bridge the Dart code to iOS, the android folder does the same but for Android, and the web folder is used to port our code over to making a web app. However, we will working out of the lib folder. This is where most of our code will go. If you open this folder, you can see that there is one file in there: main.dart. This file is also the file that the IDE is currently displaying to you.
Typically, Flutter convention states that main.dart should be the file containing the main() method, but this is not a hard and fast rule. The main() method is the first method Flutter looks for when running an app. Within this method, you'll see that Flutter is calling another function called runApp which takes the class MyApp as an input.
Without going into too much detail, you'll see that MyApp is a class that conforms to a type of StatelessWidget. If you want to see what this sample application does right now, at the top of our IDE, you'll see a dropdown menu which is currently set to no device selected. Switch this to Open iOS Simulator and then when the iOS Simulator boots up, press the green play button. This will build and run the app on the simulator.
One of the advantages of Flutter is that with the integration of Hot Reload, we do not need to constantly rebuild our app every time we change our code. To demonstrate this, let's make a small change to the current starter app. With the MyApp class, change the primary swatch of ThemeData to the following:
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
All we did here was change the color scheme of the app from blue to red. Now if we pressed CMD+S to save our file (or the lightning button), Android Studio will hot restart our app and we instantly our simulator will reflect those changes. This makes it easy to create design changes on the fly.
Figma Template (optional)
If you want to track your progress as we develop this application in Flutter, Meng has created a Figma template for you to follow. The design files are made available to you so you can check how the user interface was made.
In this section, you will learn how to build a widget from scratch in Flutter. Widgets are tiny UI components in Flutter. They are much like Views in SwiftUI. By building and combining many widgets you will be able to build an entire screen in Flutter. We'll build one row item from our sidebar.
In this section, you will learn how the basics of the Dart programming language. We will take a look at its syntax and learn how to use data types like strings and integers. We will also look at how to perform string interpolation, how to build collections, and how to create functions.
In this section, you will learn how to create classes in Dart. Classes are important to any object oriented programming language. With the help of classes, we will build the SidebarItem class that can be used to dynamically change our sidebar item. We'll also learn about refactoring our code for easier readability and how to import and use the assets inside our Project Files folder.
In this section, we will create the rest of our sidebar. We'll take a look at a couple of new layout widgets and how to use the images and fonts we imported.
In this section, we will create our very first card widget. We'll create a new Course class and then use a new layout widget called the Stack widget to overlay multiple widgets on top one another to create beautiful looking UI components.
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.
In this section, we will learn about stateful widgets and how we can reload the UI of our app by calling certain functions. We will progress in the development of our project by building the list to house our RecentCourseCard widgets and adding indicators whose colors will update based upon the location of the user.
In this section, we will learn about the differences between a PageView widget and a ListView widget. We'll be using the second type of widget to build the "Explore" section of our app.
In this section, we will learn how to create animations in Flutter with the help of Mixins and Tickers. We'll see how code can be run by passing functions across multiple widgets. We'll progress through our project by animating the entry of our sidebar when the button is tapped upon.
In this section, we will continue our journey into creating beautiful animations with Flutter. We'll see how an animation controller can manage multiple animations by dimming the content behind the sidebar screen when it is present.
In this section, we will take a look at how to add dependencies to our project by using Flutter Packages. Flutter Packages are a great way to find pre-written code and use it within your project, speeding up development. We'll use a package to build the sliding up panel in our app.
In this section, we will continue to build out the ContinueWatchingScreen widget by adding some new, custom card widgets inside a PageView widget. We'll also use stateful widgets to create the indicators for this type of widget.
In this section, we will finish building the ContinueWatchingScreen widget by creating the "Certificates" section in this screen. We will see how we can dynamically create widgets with the help of a function and how the Transform widget can be used to modify each certificate.
So far, we have presented new screens in our app my either animating them into view from offscreen or by overlaying them. In this section, we will begin building the CourseScreen widget that will be presented by using actual navigation code within Flutter. We'll look at the various forms of presenting a screen in Flutter. We'll also make some modifications to our prior code and learn to creat eplatform specific UI.
So far, we have learned how to create animation in Flutter with mixins and tickers. Now, we'll see how we can create a MagicMove animation using the Hero widget. All you need to do is wrap a widget in a Hero widget and give it a unique tag. Then any other widget with a similar tag will morph into eahc other when new screens are presented.
In this section, we'll build the content displayed below the header of the Course Screen widget. This will include some simple Text, Container, and Row widgets. However, we'll use them in unique positions to create unique looking shapes and layouts.
In this section, we'll build the rest of the UI for our CourseScreen widget. This will include dynamically creating the indicators and creating the "View All" button. We'll also link this button to a new SlidingUpPanel widget and learn how controllers can be used to perform code that would normally be performed by a human interaction.
In this section, we'll build the entire panel in our SlidingUpPanel widget. Up till now, we were only building ListView widgets that could scroll horizontally. Now, we'll see how to build a list that scrolls vertically within our panel. We'll use a function to dynamically build the cards for our list and add a footer text at the bottom
In this section, we'll start to build the profile screen in our app. We'll rely on navigation techniques we have learned so far and see how we can make the CircleAvatar widget responsive to taps.
In this section, we'll continue to build the profile screen in our app by populating it with some of our personal information. We'll rely on widgets we have already seen to add our profile picture, name, title, and badges awarded.
In this section, we'll build the rest of our app by finishing the ProfileScreen widget. We'll add the "Certificates" section and the "Completed Courses" section in the profile screen.
In the final section of this course, we'll take a look at how to add custom app icons for both iOS and Android and change the name of the app for each platform.