Flutter Cookbook, Second Edition: 100+ real-world recipes to build cross-platform applications with Flutter 3.3 powered by Dart 2.16

Welcome to Packt Early Access. We’re giving you an exclusive preview of this book before it goes on sale. It can take many months to write a book, but our authors have cutting-edge information to share with you today. Early Access gives you an insight into the latest developments by making chapter drafts available. The chapters may be a little rough around the edges right now, but our authors will update them over time.

You can dip in and out of this book or follow along from start to finish; Early Access is designed to be flexible. We hope you enjoy getting to know more about the process of writing a Packt book.

1. Chapter 1: Getting Started with Flutter: Setting up your environment and choosing an IDE
2. Chapter 2: Dart: A programming language you probably already know
3. Chapter 3: Building Layouts, Hot Reload and Hot Restart...

Why Flutter?

Flutter is an open-source framework to build apps, created by Google. Before investing time and effort in learning a new framework, there is a critical question we need to answer: Is Flutter worth learning and using?

While the answer to this question probably depends on your needs and expectations, there are several reasons that make Flutter a great framework to learn and use. Some of them include:

• Cross-platform: With Flutter, you can build apps for iOS and Android, web, desktop, and IoT devices with a single code base.
• Fast development: Flutter includes several features that help speed up your development workflow. Among the most important, it’s worth mentioning hot reload, hot restart, and sound null safety support.
• User interface: Flutter provides a rich set of widgets to create beautiful, high-performance apps.
• Open source: Flutter and Dart (the programming language you use in Flutter) are open source and supported by Google...

Technical requirements

Flutter requires a 64-bit operating system. In particular:

• For Windows, you will need Windows 10 or later (64-bit and x86-64 based), Git for Windows, and PowerShell 5 or newer.
• For macOS, OS X Yosemite 10.10 or later is required.
• For Linux and ChromeOS, there is a list of common programs that should be installed in your system before setting up Flutter. More info can be found here: https://docs.flutter.dev/get-started/install/linux (for Linux) and here: https://docs.flutter.dev/get-started/install/chromeos (for ChromeOS).

Building mobile applications can be a taxing task for your computer. While the minimum hardware requirements to develop a Flutter app are relatively low, your developing experience will be greatly enhanced with the following specs:

• 8 GB of random-access memory (RAM). 16 gigabytes (GB) is preferred, especially when using a virtual device (emulator or simulator).
• At least 50 GB of available hard...

Installing Flutter: a high-level overview

You can start developing Flutter apps without any installation or configuration. You can quickly create prototypes and simple apps and share your code with fellow developers with an online tool called DartPad, available here: https://dartpad.dev. It is an online open-source tool that runs on any browser.

However, if you are serious about programming with Flutter, there will come a time when you need to develop your apps locally and, therefore, will need to configure your system.

Configuring your Flutter development environment is rather easy. You can divide the process into three parts:

1. First, you must install the Flutter software development kit (SDK). Currently, you can build Flutter apps from Windows, macOS, Linux, and ChromeOS.
2. Then, depending on your target platform, you have to install a specific platform SDK: Android, iOS, and/or desktop. You can also develop for the web, without installing any specific SDK...

Installing the Flutter SDK

Before you can build anything, you need to download the Flutter SDK.

On the main Flutter website at https://docs.flutter.dev/get-started/install, you’ll find the prebuilt packages for Windows, macOS, Linux, or ChromeOS—the currently supported platforms to create Flutter apps.

Figure 1.1: The Flutter installation page

Once you select your operating system, whatever your choice, you will find a section called Get the Flutter SDK. Here, you will find a compressed file (.zip for Windows and macOS, and .tar.gz for Linux and ChromeOS).

You should then create a directory for the Flutter SDK, and extract the contents of the compressed file into that directory; for instance, this could be c:\dev\flutter on a Windows machine or ~/development on other platforms.

There is another tool, called FVM (Flutter Version Management), that allows managing multiple versions of Flutter SDKs on your development machine.

If...

How to use Git to manage the Flutter SDK

An alternative way to install the Flutter SDK is using Git.

Since Flutter is open source and hosted on GitHub, if you clone the main Flutter repository, you’ll already have everything you need. As an added bonus, you can easily change to different versions of the Flutter SDK when needed.

The packages that are available to download on Flutter’s website are snapshots from the Git repository. Flutter uses Git internally to manage its versions, channels, and upgrades.

Installing Git

First, you need to make sure you have Git installed on your computer. Git is installed by default on most Mac and Linux machines. For Windows, you can download and install Git here: https://git-scm.com/download/win.

You can also download a Git client to make working with repositories a bit easier. Tools such as Sourcetree (https://www.sourcetreeapp.com) or GitHub Desktop (https://desktop.github.com) can simplify working with Git....

Setting up the command line and saving path variables

Now that you have installed the Flutter SDK, there are a few more steps needed to make the software accessible on your computer. Unlike apps with user interfaces (UIs), Flutter is primarily a command-line tool. Let’s quickly learn how to set up the command line on macOS, Windows, and Linux in the following sections.

macOS command-line setup

To use Flutter on macOS, you need to save the location of the Flutter executable to your system’s environment variables.

Newer Macs use the Z shell (also known as zsh). This is basically an improved version of the older Bash, with several additional features.

When using zsh, you can add a line to your zshrc file, which is a text file that contains the zsh configuration. If the file does not exist yet, you can create a new file as follows:

1. Open the zshrc file with the following command in your Terminal:

   nano $HOME/.zshrc
   

...

Confirming your environment is correct with Flutter Doctor

Flutter comes with a tool called Flutter Doctor. This tool provides a list of everything that needs to be done to make sure that Flutter can run correctly. You are going to use Flutter Doctor as a guide during the installation process. This tool is also invaluable in checking whether your system is up to date.

In your Terminal window, type the following command:

flutter doctor

Flutter Doctor will tell you whether your platform SDKs are configured properly and whether Flutter can see any devices, including physical mobile devices, simulators and emulators, your desktop, and the web browser.

Configuring the iOS SDK

The iOS SDK is provided by a single application: Xcode. Xcode is one behemoth of an application; it controls all the official ways in which you will interact with Apple’s platforms and is only available for macOS. As large as Xcode is, there are a few pieces of software that are missing. Two of these are community tools: CocoaPods and Homebrew. These are package managers, or programs that install other programs. You can use both of these tools to build iOS apps.

Downloading Xcode

The iOS SDK comes bundled with Apple’s IDE, Xcode. The best place to get Xcode is through the Apple App Store:

1. Press Command + Space to open Spotlight and then type in app store:

   

   Figure 1.6: App Store results in Spotlight

   As an alternative, you can just click on the menu in the top-left corner of your screen and select App Store, but keyboard shortcuts are much more fun.

2. After the App Store opens, search for Xcode and select...

Configuring the Android SDK setup

Just like with Xcode, Android Studio and the Android SDK come hand in hand, which should make this process fairly easy. But also like Xcode, Android Studio is just the starting point. There are a bunch of tiny tools that you’ll need to get everything up and running.

Installing Android Studio

Follow these steps to install Android Studio:

1. You can download Android Studio at https://developer.android.com/studio.

   The website will autodetect your operating system and only show the appropriate download link:

   

   Figure 1.10: Android Studio download page

   After Android Studio is installed, you’ll need to download your target Android SDK(s). From the Android Studio menu, select Preferences and then type android into the search field:

   

   Figure 1.11: Android Studio SDKs screen

   While it may be tempting to grab the most recent version of the Android SDK, you might want to choose the second most recent...

Which IDE/editor should you choose?

A developer’s IDE is a very personal choice, and developers may engage in heated battles over the best tool to use.

Ultimately, the choice is dependent on which tool you are most productive and more capable in. If you find yourself fighting with the tool rather than just writing code, then it might not be the right choice. As with most things, it’s more important to make choices based on what best fits your personal and unique style, rather than follow any prescribed doctrine.

You can develop Flutter apps with any editor, including Notepad and the Flutter CLI, but Flutter provides official plugins for four popular IDEs:

• Android Studio
• Visual Studio Code (VS Code)
• IntelliJ IDEA
• Emacs

Let’s compare and configure all four and find out which one might be right for you.

Android Studio

Android Studio is a mature and stable IDE. Since 2014, Android Studio has been promoted as...

Picking the right channel

One final item we need to cover before diving into building apps is the concept of channels. Flutter segments its development streams into channels, which is really just a fancy name for Git branches. Each channel represents a different level of stability for the Flutter framework. Flutter developers will release the latest features to the master channel first. As these features stabilize, they will get promoted to the beta channel, and then to the stable channel.

In previous Flutter versions, there was also a dev channel, between master and beta, but this was removed. The Flutter versioning policy will probably be updated in the near future, so please have a look at the Flutter build release page at https://github.com/flutter/flutter/wiki/Flutter-build-release-channels for the latest versioning updates.

Most of the time, you will probably want to stick to the stable channel. This will make sure that your code mostly runs without any...

Summary

By now, you should have a working Flutter environment set up. It is recommended that you rerun Flutter Doctor from time to time to check the status of your environment. The Doctor will also let you know when a new version of Flutter is available, which—depending on your channel—happens every few weeks or months. Flutter is still a relatively young framework and growing fast, so you should always keep your environment up to date.

The Flutter team is also very receptive to helping you with any technical issues you might encounter. If you run into an issue that hasn’t been documented yet, you can always reach out to the Flutter team directly on GitHub at https://github.com/flutter/flutter/issues.

Learning about the command line will become an invaluable skill. This can range from setting up and configuring your environment to writing build scripts, which we will do later in this book when we automate building and publishing the apps to the stores...