Flutter Recipes: Mobile Development Solutions for iOS and Android
By Fu Cheng
()
About this ebook
Take advantage of this comprehensive reference to solving common problems when developing with Flutter. Along with an introduction to the basic concepts of Flutter development, the recipes in this book cover all important aspects of this emerging technology, including development, testing, debugging, performance tuning, app publishing, and continuous integration.
Although Flutter presents a rich, cross-platform mobile development framework, helpful documentation is not easily found. Here you’ll review solutions to various scenarios and use creative, tested ways to accomplish everything from simple to complex development tasks.
Flutter is developed using Dart and contains a unique technology stack that sets it apart from its competitors. This book takes the mystery out of working with the Dart language and integrating Flutter into your already existing workflows and development projects. With Flutter Recipes, you’ll learn how to build and deploy apps freshly started in Flutter, as well as apps already in progress, while side-stepping any potential roadblocks you may face along the way.
What You'll Learn
- Debug with Dart Observatory
- Program accessibility and localization features
- Build and release apps for iOS and Android
- Incorporate reactive programming
Mobile developers with some experience in other frameworks who would like to work with the growing and popular Flutter.
Related to Flutter Recipes
Related ebooks
Mastering Android Game Development Rating: 0 out of 5 stars0 ratingsOptimizing Visual Studio Code for Python Development: Developing More Efficient and Effective Programs in Python Rating: 0 out of 5 stars0 ratingsLearning Dart Rating: 0 out of 5 stars0 ratingsPro ASP.NET Core 3: Develop Cloud-Ready Web Applications Using MVC, Blazor, and Razor Pages Rating: 0 out of 5 stars0 ratingsCocos2D Game Development Essentials Rating: 0 out of 5 stars0 ratingsMastering The Spritekit Framework: Develop Professional Games With This New Ios 7 Framework Rating: 0 out of 5 stars0 ratingsAndroid Studio 2 Essentials - Second Edition Rating: 0 out of 5 stars0 ratingsMastering Android Application Development Rating: 5 out of 5 stars5/5Mastering Windows Presentation Foundation Rating: 4 out of 5 stars4/5HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL Rating: 0 out of 5 stars0 ratingsMeteor Design Patterns Rating: 0 out of 5 stars0 ratingsPro Spring Boot 2: An Authoritative Guide to Building Microservices, Web and Enterprise Applications, and Best Practices Rating: 0 out of 5 stars0 ratingsAndroid Design Patterns and Best Practice Rating: 5 out of 5 stars5/5Pro TypeScript: Application-Scale JavaScript Development Rating: 4 out of 5 stars4/5Getting Started with Meteor.js JavaScript Framework - Second Edition Rating: 0 out of 5 stars0 ratingsMEAN Web Development - Second Edition Rating: 0 out of 5 stars0 ratingsOpen Client/Server Computing and Middleware Rating: 0 out of 5 stars0 ratingsCloning Internet Applications with Ruby Rating: 5 out of 5 stars5/5PHP and MySQL Web Development All-in-One Desk Reference For Dummies Rating: 0 out of 5 stars0 ratingsBeginning DotNetNuke Skinning and Design Rating: 0 out of 5 stars0 ratingsSwift 2 Design Patterns Rating: 0 out of 5 stars0 ratingsProgramming Constructs in Java Rating: 1 out of 5 stars1/5Box2D for Flash Games Rating: 0 out of 5 stars0 ratingsBeginning Flutter: A Hands On Guide to App Development Rating: 0 out of 5 stars0 ratingsMastering Ninject for Dependency Injection Rating: 0 out of 5 stars0 ratingsSimultaneous multithreading A Complete Guide Rating: 0 out of 5 stars0 ratingsXamarin Mobile Application Development for Android - Second Edition Rating: 0 out of 5 stars0 ratingsSoftware architecture A Complete Guide - 2019 Edition Rating: 0 out of 5 stars0 ratingsiOS and OS X Network Programming Cookbook Rating: 0 out of 5 stars0 ratings
Programming For You
Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5SQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsLearn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Photoshop For Beginners: Learn Adobe Photoshop cs5 Basics With Tutorials Rating: 0 out of 5 stars0 ratingsMastering Windows PowerShell Scripting Rating: 4 out of 5 stars4/5The Absolute Beginner's Guide to Binary, Hex, Bits, and Bytes! How to Master Your Computer's Love Language Rating: 5 out of 5 stars5/5Learn JavaScript in 24 Hours Rating: 3 out of 5 stars3/5Hacking: Ultimate Beginner's Guide for Computer Hacking in 2018 and Beyond: Hacking in 2018, #1 Rating: 4 out of 5 stars4/5Python Machine Learning By Example Rating: 4 out of 5 stars4/5Problem Solving in C and Python: Programming Exercises and Solutions, Part 1 Rating: 5 out of 5 stars5/5Programming Arduino: Getting Started with Sketches Rating: 4 out of 5 stars4/5OneNote: The Ultimate Guide on How to Use Microsoft OneNote for Getting Things Done Rating: 1 out of 5 stars1/5SQL All-in-One For Dummies Rating: 3 out of 5 stars3/5Modern C++ for Absolute Beginners: A Friendly Introduction to C++ Programming Language and C++11 to C++20 Standards Rating: 0 out of 5 stars0 ratings
Reviews for Flutter Recipes
0 ratings0 reviews
Book preview
Flutter Recipes - Fu Cheng
© Fu Cheng 2019
F. ChengFlutter Recipeshttps://doi.org/10.1007/978-1-4842-4982-6_1
1. Get Started
Fu Cheng¹
(1)
Sandringham, Auckland, New Zealand
Recipes in this chapter help you set up your local development environment to get ready for building Flutter apps. Depending on the operating system of your machine, the steps to set up may be different. You only need to use the recipes for your own requirement. After using recipes in this chapter, you should be able to get the first Flutter app running on emulators or physical devices.
1.1 Installing Flutter SDK on Windows
Problem
You have a Windows machine, and you want to start Flutter development on this machine.
Solution
Install Flutter SDK and set up Android platform on the Windows machine.
Discussion
Flutter SDK supports Windows platform. Installing Flutter on Windows is not a hard task as you may think. First of all, you need to make sure that your local development environment meets the minimum requirements. You’ll need to have 64-bit Windows 7 SP1 or later and at least 400MB free disk space for Flutter SDK to use. Flutter SDK also requires Windows PowerShell 5.0 or newer and Git for Windows to be available on the machine.
Windows PowerShell 5.0 is pre-installed with Windows 10. For Windows versions older than Windows 10, you need to install PowerShell 5.0 manually by following instructions from Microsoft ( https://docs.microsoft.com/en-us/powershell/scripting/setup/installing-windows-powershell ). You may already have Git for Windows installed since Git is a very popular tool for development. If you can run Git commands in PowerShell, then you are good to go. Otherwise, you need to download Git for Windows ( https://git-scm.com/download/win ) and install it. When installing Git for Windows, make sure the option Git from the command line and also from 3rd-party software
is selected in the page Adjusting your PATH environment
; see Figure 1-1.
Figure 1-1
Git for Windows setup
After these minimum requirements have been satisfied, you can download the Flutter SDK zip bundles from the official web site ( https://flutter.dev/docs/get-started/install/windows ). Extract the downloaded zip file to the desired location on the local machine. It’s recommended to avoid using the system driver where Windows is installed. In the extracted directory, double-click the file flutter_console.bat to start Flutter Console and run Flutter SDK commands.
To be able to run Flutter SDK commands in any Windows console, we need to add Flutter SDK to the PATH environment variable. The full path to bin of the installation directory should be added to the PATH. To modify the PATH on Windows 10
1.
Open the Start Search and type env
and select Edit the system environment variables
.
2.
Click the Environment Variables…
button and find the row with Path
in the first column under the System Variables
section.
3.
In the Edit environment variable
dialog, click New
and input the path of the bin directory of installed Flutter SDK.
4.
Close all dialogs by clicking OK
.
Now you can open a new PowerShell windows and type the command flutter --version to verify the installation; see Figure 1-2.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig2_HTML.jpgFigure 1-2
Success installation of Flutter SDK on Windows
Only Android platform is supported on Windows. Continue the setup following Recipe 1-7.
1.2 Installing Flutter SDK on Linux
Problem
You have a Linux machine, and you want to start Flutter development on this machine.
Solution
Install Flutter SDK and set up Android platform on the Linux machine.
Discussion
Flutter SDK supports Linux platform. However, given that there are many different Linux distributions available, the actual steps to get Flutter SDK installed may be slightly different. This recipe is based on installing Flutter SDK on Ubuntu 18.04 LTS.
Flutter SDK requires several command-line tools to be available in the local environment, including bash, mkdir, rm, git, curl, unzip, and which. For most Linux distributions, the commands bash, mkdir, rm, unzip, and which should already be included by default. The easiest way to verify that is to open a terminal window and type these commands to see the output. You’ll see command not found
error if a command is not installed. git and curl are unlikely to be included by default. Most Linux distributions provide built-in package managers to install these tools. For Ubuntu, you can use apt-get; see the following command.
$ sudo apt-get update
$ sudo apt-get install -y curl git
After the installation finishes successfully, you can type commands curl and git to verify.
Now you can download the Flutter SDK zip bundles from the official web site ( https://flutter.dev/docs/get-started/install/linux ). Extract the downloaded zip file to the desired location on the local machine. Open a terminal window, navigate to the directory of extracted Flutter SDK, and run the following command to verify the installation.
$ bin/flutter --version
It’s recommended to add the bin directory of Flutter SDK to the PATH environment variable, so the flutter command can be run in any terminal session. For Ubuntu, you can edit the file ~/.profile.
$ nano ~/.profile
Add the following line to this file and save.
export PATH=
In the current terminal window, you need to run source ~/.profile for the change to take effect. Or you can simply create a new terminal window. Type flutter --version in any terminal window to verify. You’ll see the same output as Figure 1-2.
Only Android platform is supported on Linux. Continue the setup following Recipe 1-7.
1.3 Installing Flutter SDK on macOS
Problem
You have a macOS machine, and you want to start Flutter development on this machine.
Solution
Install Flutter SDK and set up Android and iOS platforms on the macOS machine.
Discussion
For macOS, Flutter SDK requires several command-line tools to be available in the local environment. These tools are bash, mkdir, rm, git, curl, unzip, and which. macOS should already have these tools as part of the system. You can simply type these commands in the terminal to verify. The easiest way to install missing tools is to use Homebrew ( https://brew.sh/ ). Homebrew is also important when setting up the iOS development environment. Use brew install to install tools, for example, brew install git to install Git.
After installing required tools, we can download the Flutter SDK zip bundle from the official web site ( https://flutter.dev/docs/get-started/install/macos ). Extract the downloaded zip file to the desired location on the local machine. The flutter command is located under the bin directory of the extracted location.
To run flutter command in any terminal session, the PATH environment variable should be updated to include the bin directory of the Flutter SDK. This is typically done by updating the profile of the shell. For the default bash, this file is ~/.bash_profile. For zsh, this file is ~/.zshrc. Modify this file to include the following line.
export PATH=
To make the current terminal window use the updated PATH, you need to run source ~/.bash_profile. You can also start a new terminal window which will automatically use the updated value of PATH.
Run flutter --version in any terminal window to verify the installation. You’ll see the same output as Figure 1-2.
Both Android and iOS platforms are supported on macOS. Continue the setup following Recipes 1-4 and 1-7.
1.4 Setting Up iOS Platform
Problem
You want to develop Flutter apps for iOS platform.
Solution
Set up iOS platform for Flutter SDK on your Mac.
Discussion
To develop Flutter apps for iOS, you need to have a Mac with at least Xcode 9.0. To set up the iOS platform, you need to go through the following steps:
1.
Install Xcode (https://developer.apple.com/xcode/) from App Store.
2.
Verify the path of the Xcode command-line tools. Run the following command to show the current path to the command-line tools. Usually you should see output like /Applications/Xcode.app/Contents/Developer.
$ xcode-select -p
If the path shown in the output is not the one you want, for example, you have different versions of Xcode command-line tools installed, use xcode-select -s to switch to a different path. If you don’t have the command-line tools installed, use xcode-select --install to open the installation dialog.
3.
You need to open Xcode once to accept its license agreement. Or you can choose to run the command sudo xcodebuild -license to view and accept it.
4.
Flutter SDK requires other tools for iOS platform, including libimobiledevice, usbmuxd, ideviceinstaller, ios-deploy, and CocoaPods (https://cocoapods.org/). All these tools can be installed using Homebrew. If you run the command flutter doctor, it shows the commands to install these tools using Homebrew. Simply run these commands and use flutter doctor to check again. When you see the green tick of iOS toolchain,
the iOS platform is set up successfully for Flutter SDK to use; see Figure 1-3 for a sample output.
Figure 1-3
Output of flutter doctor
1.5 Setting Up iOS Simulators
Problem
You need a quick way to test Flutter apps on iOS platform.
Solution
Set up the iOS simulator.
Discussion
Xcode provides simulators for different iOS versions. You can download additional simulators using the tab Components in Xcode ➤ Preferences. To open the simulator, run the following command.
$ open -a Simulator
When the simulator is opened, you can switch the combination of different devices and iOS versions using the menu Hardware ➤ Device.
After the simulator is started, running flutter devices should show the simulator.
1.6 Setting Up iOS Devices
Problem
You have finished the testing of your Flutter apps on iOS simulator, and you want to test them on real iOS devices.
Solution
Deploy Flutter apps to iOS devices.
Discussion
Before deploying Flutter apps to iOS devices, you need to run flutter doctor to verify that iOS toolchain is set up correctly. To develop and test Flutter apps on devices, you need to have an Apple ID. If you want to distribute apps to App Store, you also need to enroll Apple Developer Program.
The first time you connect a physical device for iOS development, you need to trust the Mac to connect your device. Flutter apps need to be signed before deploying to devices. Open the ios/Runner.xcworkspace file of the Flutter app in Xcode. In the General tab, select the correct team in the Signing section. If you select the connected device as the running target, Xcode will finish the necessary configurations for code signing. The Bundle Identifier must be unique.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig4_HTML.jpgFigure 1-4
App signing in Xcode
The Flutter app can be deployed to the device using Xcode or the command flutter run. The first time you deploy the app, you may need to trust the development certificate in General ➤ Device Management of the Settings app on the iOS device.
1.7 Setting Up Android Platform
Problem
You want to develop Flutter apps for Android platform.
Solution
Install Android Studio to set up Android platform on your local machine.
Discussion
To develop Flutter apps for Android platform, we need to set up Android platform first. Flutter SDK requires a full installation of Android Studio for its Android platform dependencies, so we have to install Android Studio.
Go to Android Studio download page ( https://developer.android.com/studio/ ) and click the DOWNLOAD ANDROID STUDIO
button. You need to accept the terms and conditions to download it. The download page checks your platform and provides the most suitable version to download. If the provided option is not what you want, click the DOWNLOAD OPTIONS
and select from the list of all download options; see Figure 1-5.
Figure 1-5
Download options of Android Studio
Android Studio provides a GUI-based installer, so it’s very easy to get it installed and running on the local machine. Installing Android Studio also installs Android SDK, Android SDK platform tools, and Android SDK build tools. Even you choose not to use Android Studio as the IDE, Android SDK and related tools are still required for Android development.
In the Android SDK page of preferences in Android Studio, you can also install additional Android SDK platforms and tools; see Figure 1-6. Android Studio also prompts available updates to installed Android SDK platforms and tools.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig6_HTML.jpgFigure 1-6
Manage Android SDK in Android Studio
1.8 Setting Up Android Emulators
Problem
You need a quick way to test Flutter apps for Android platform.
Solution
Set up the Android emulators.
Discussion
When developing Flutter apps, you can run them on Android emulators to see the results of running apps. To set up Android emulators, you can go through the following steps.
Open an Android project in Android Studio and select Tools ➤ Android ➤ AVD Manager to open AVD Manager and click Create Virtual Device…
; see Figure 1-7.
Figure 1-7
Android Virtual Device Manager
Choose a device definition, for example, Nexus 6P, and click Next; see Figure 1-8.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig8_HTML.jpgFigure 1-8
Select Hardware
Select a system image for the Android version you want to emulate and click Next; see Figure 1-9.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig9_HTML.jpgFigure 1-9
Select a system image
Select Hardware - GLE 2.0 for Emulated Performance to enable hardware acceleration and click Finish; see Figure 1-10.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig10_HTML.jpgFigure 1-10
Select emulated performance
A new AVD is created and listed in AVD Manager. Android Studio official web site provides a comprehensive guide ( https://developer.android.com/studio/run/managing-avds ) on how to manage AVDs, if you want to know more details about AVD configurations.
In the AVD Manager, click the green triangle button to start the emulator. It may take some time for the emulator to start up and show the default Android home screen.
1.9 Setting Up Android Devices
Problem
You have finished the testing of your Flutter apps on emulators, and you want to test them on real Android devices.
Solution
Set up your Android device to run Flutter apps.
Discussion
To set up your Android device, you can go through the following steps:
1.
You need to enable Developer options and USB debugging on your device. Check the instructions on the official Android web site (https://developer.android.com/studio/debug/dev-options#enable). You may also need to install Google USB driver (https://developer.android.com/studio/run/win-usb) on Windows machines.
2.
Plug your device into your computer with a USB cable. The device prompts a dialog to ask for permissions, authorizing your computer to access your device.
3.
Run the command flutter devices to verify Flutter SDK can recognize your device.
The Flutter app can be deployed to the device using Android Studio or the command flutter run.
1.10 Creating Flutter Apps Using Command Line
Problem
You have already set up your local environment to develop Flutter apps. Even though using Android Studio or VS Code is a good choice for development, you may still want to know how to do this from command line.
Solution
Use the commands from Flutter SDK to create and build Flutter apps.
Discussion
Using tools like Android Studio and VS Code can make Flutter development much easier. However, it’s still valuable to know how to build Flutter apps using the command-line tools. This is important for continuous integration. It also allows you to use any other editors to develop Flutter apps.
The command flutter create can be used to create a new Flutter app. Actually, Android Studio and VS Code both use this command to create new Flutter apps. The following command creates a new Flutter app in the directory flutter_app.
$ flutter create flutter_app
This command creates various files in the specified directory as the skeleton code of the new app. Navigate to the directory flutter_app and use flutter run to run this app.
1.11 Creating Flutter Apps Using Android Studio
Problem
You want to have a powerful IDE that meets most of the requirements when developing Flutter apps.
Solution
Use Android Studio to create Flutter apps.
Discussion
Since we already have Android Studio installed to set up Android platform for Flutter SDK, it’s a natural choice to use Android Studio as the IDE to develop Flutter apps. Android Studio itself is a powerful IDE based on IntelliJ platform. If you have used other products from JetBrains, like IntelliJ IDEA or WebStorm, you may find it’s quite easy to get started with Android Studio.
To use Android Studio for Flutter development, Flutter and Dart plugins are required. To install these two plugins, open the Plugins page in Preferences dialog of Android Studio and click the Browse repositories…
button. In the opened dialog, type in Flutter
to search for the Flutter plugin to install; see Figure 1-11. Click the green Install button to install it. This will also prompt you to install the Dart plugin. Click Yes to install that as well. Restart Android Studio.
Figure 1-11
Install Flutter plugin in Android Studio
After restarting Android Studio, you should see a new option to start a new Flutter project. The wizard for Flutter projects has different pages to configure the new project.
The first page allows you to select type of the new Flutter project. The description in the page shows the difference of these four different project types. Most of the time, we are going to create a Flutter Application.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig12_HTML.jpgFigure 1-12
Select type of Flutter project
The second page allows you to customize basic configurations of the new Flutter project, including project name, location, and description.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig13_HTML.jpgFigure 1-13
Basic project configurations
The last page allows you to customize some advanced project configurations. The company domain is used to create unique identifier for the project.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig14_HTML.jpgFigure 1-14
Advanced project configurations
After finishing the wizard, a new project is created and opened in Android Studio.
1.12 Creating Flutter Apps Using VS Code
Problem
You want to use a light-weight editor to develop Flutter apps.
Solution
Use VS Code to create Flutter apps.
Discussion
VS Code ( https://code.visualstudio.com/ ) is a popular light-weight editor in the community of front-end developers. With the extensions for Flutter and Dart, we can also use VS Code for Flutter development. Open the Extensions tab in VS Code and search for flutter
to install the Flutter extension; see Figure 1-15. Flutter extension depends on the Dart extension, which will also be installed. After installing these two extensions, we can open the command palette and search flutter
for available Flutter commands.
Figure 1-15
Install Flutter extension in VS Code
To create a new Flutter in VS Code, open the command palette and run the Flutter: New Project command. Input the name of the new project in the opened dialog. Select the directory of the project. VS Code opens a new window for the newly created project.
1.13 Running Flutter Apps
Problem
You want to run Flutter apps on emulators or devices.
Solution
Use flutter run command or IDEs to run Flutter apps.
Discussion
Depending on your preferred approach to develop Flutter apps, there are different ways to run Flutter apps. Before running Flutter apps, you must have at least one running emulator or connected device:
The command flutter run starts the current Flutter app.
In Android Studio, select the emulator or device from the dropdown menu shown in Figure 1-16, then click the Run button to start the app.
In VS Code, select Debug ➤ Start Without Debugging to start the app.
../images/479501_1_En_1_Chapter/479501_1_En_1_Fig16_HTML.jpgFigure 1-16
Select device in Android Studio
1.14 Understanding Code Structure of Flutter Apps
Problem
You want to know the typical structure of Flutter apps.
Solution
Go through the sample app generated by Flutter SDK and understand the files.
Discussion
Before going into details of developing Flutter apps, you should know about the code structure of Flutter apps, so you know where to add new files. Flutter apps have a predefined directory structure for various files in the app. When a new app is created, you can take a look of the generated files and have a basic understanding of them. Table 1-1 shows directories and files of the created app.
Table 1-1
Directories and files of a Flutter app