Flutter for Designers

Source Code

You can also view the source code for each section in the course in my GitHub repository.

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.

Requirements

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.

Install Xcode

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:

mkdir flutter_dev
cd flutter_dev
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:

vim ~/.zshrc

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:

export PATH=[PATH_TO_FLUTTER_SDK]/flutter/bin:$PATH

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.

Hot Reload

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:

return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
		primarySwatch: Colors.red,
		visualDensity: VisualDensity.adaptivePlatformDensity
	),
	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.

Import Assets

Assets can be downloaded in the second section of this course, or in the Downloads page. To import assets, drag and drop the folders inside the Assets folder.