Flutter for Beginners

An introductory guide to building cross-platform mobile applications with Flutter and Dart 2

Alessandro Biessek

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781788990523
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming Mobile Devices
• Index: Computer Science

A step-by-step guide to learning Flutter and Dart 2 for creating Android and iOS mobile applications

Key Features

• Get up to speed with the basics of Dart programming and delve into Flutter development
• Understand native SDK and third-party libraries for building Android and iOS applications using Flutter
• Package and deploy your Flutter apps to achieve native-like performance

Book Description

Google Flutter is a cross-platform mobile framework that makes it easy to write high-performance apps for Android and iOS. This book will help you get to grips with the basics of the Flutter framework and the Dart programming language.

Starting from setting up your development environment, you'll learn to design the UI and add user input functions. You'll explore the navigator widget to manage app routes and learn to add transitions between screens. The book will even guide you through developing your own plugin and later, you'll discover how to structure good plugin code. Using the Google Places API, you'll also understand how to display a map in the app and add markers and interactions to it. You'll then learn to improve the user experience with features such as map integrations, platform-specific code with native languages, and personalized animation options for designing intuitive UIs.

The book follows a practical approach and gives you access to all relevant code files hosted at github.com/PacktPublishing/Flutter-for-Beginners. This will help you access a variety of examples and prepare your own bug-free apps, ready to deploy on the App Store and Google Play Store.

By the end of this book, you'll be well-versed with Dart programming and have the skills to develop your own mobile apps or build a career as a Dart and Flutter app developer.

What you will learn

• Understand the fundamentals of the Dart programming language
• Explore the core concepts of the Flutter UI and how it compiles for multiple platforms
• Develop Flutter plugins and widgets and understand how to structure plugin code appropriately
• Style your Android and iOS apps with widgets and learn the difference between stateful and stateless widgets
• Add animation to your UI using Flutter's AnimatedBuilder component
• Integrate your native code into your Flutter codebase for native app performance

Who this book is for

This book is for developers looking to learn Google's revolutionary framework Flutter from scratch. No prior knowledge of Flutter or Dart is required; however, basic knowledge of any programming language will be helpful.

Section 1: Introduction to Dart

In this section, you will gain an understanding of the core Flutter framework, explore the basics of the Dart language, learn how to set up your own environment, and finally, learn how to get started with it.

The following chapters are included in this section:

• Chapter 1, An Introduction to Dart
• Chapter 2, Intermediate Dart Programming
• Chapter 3, An Introduction to Flutter

An Introduction to Dart

The Dart language is present at the core of the Flutter framework. A modern framework such as Flutter requires a high-level modern language to be capable of providing the best experience to the developer and making it possible to create awesome mobile applications. Understanding Dart is fundamental to working with Flutter; developers need to know the origins of the Dart language, how the community is working on it, its strengths, and why it is the chosen programming language to develop with Flutter. In this chapter, you will review the basics of the Dart language and be provided with some links to resources that can help you on your Flutter journey. You will review Dart built-in types and operators, and how Dart works with object-oriented programming (OOP). By understanding what the Dart language provides, you will be able to comfortably experiment with the Dart environment by yourself and expand your knowledge.

We will be covering the following topics in this chapter:

• Getting to know the principles and tools of the Dart language
• Understanding why Flutter uses Dart
• Learning the basics of the Dart language structure
• Introducing OOP with Dart

Getting started with Dart

The Dart language, developed by Google, is a programming language that can be used to develop web, desktop, server-side, and mobile applications. Dart is the programming language used to code Flutter apps, enabling it to provide the best experience to the developer for the creation of high-level mobile applications. So, let's explore what Dart provides and how it works so we can later apply what we learn in Flutter.

Dart aims to aggregate the benefits of most of the high-level languages with mature language features, including the following:

• Productive tooling: This includes tools to analyze code, integrated development environment (IDE) plugins, and big package ecosystems.
• Garbage collection: This manages or deals with memory deallocation (mainly memory occupied by objects that are no longer in use).
• Type annotations (optional): This is for those who want security and consistency to control all of the data in an application.
• Statically typed: Although type annotations are optional, Dart is type-safe and uses type inference to analyze types in runtime. This feature is important for finding bugs during compile time.
• Portability: This is not only for the web (transpiled to JavaScript), but it can be natively compiled to ARM and x86 code.

The evolution of Dart

Unveiled in 2011, Dart has been evolving ever since. Dart saw its stable release in 2013, with major changes included in the release of Dart 2.0 toward the end of 2018:

• It was focused on web development in its conception, with the main aim of replacing JavaScript: However, now Dart is focused on mobile development areas as well as on Flutter.
• It tried solving JavaScript's problems: JavaScript doesn't provide the robustness that many consolidated languages do. So, Dart was launched as a mature successor to JavaScript.
• It offers the best performance and better tools for large-scale projects: Dart has modern and stable tooling provided by IDE plugins. It's been designed to get the best possible performance while keeping the feel of a dynamic language.
• It is molded to be robust and flexible: By keeping the type annotations optional and adding OOP features, Dart balances the two worlds of flexibility and robustness.

Dart is a great modern cross-platform, general-purpose language that continually improves its features, making it more mature and flexible. That's why the Flutter framework team chose the Dart language to work with.

How Dart works

To understand where the language's flexibility came from, we need to know how we can run Dart code. This is done in two ways:

• Dart Virtual Machines (VMs)
• JavaScript compilations

Have a look at the following diagram:

Dart VM and JavaScript compilation

Dart code can be run in a Dart-capable environment. A Dart-capable environment provides essential features to an app, such as the following:

• Runtime systems
• Dart core libraries
• Garbage collectors

The execution of Dart code operates in two modes—Just-In-Time (JIT) compilation or Ahead-Of-Time (AOT) compilation:

• A JIT compilation is where the source code is loaded and compiled to native machine code by the Dart VM on the fly. It is used to run code in the command-line interface or when you are developing a mobile application in order to use features such as debugging and hot reloading.
• An AOT compilation is where the Dart VM and your code are precompiled and the VM works more like a Dart runtime system, providing a garbage collector and various native methods from the Dart software development kit (SDK) to the application.

Dart contributes to Flutter's most famous feature, hot reload, which is based on the Dart JIT compiler, allowing fast interactions with live code swaps. See the Understanding why Flutter uses Dart section for details.

Hands-on Dart

The way Flutter is designed is heavily influenced by the Dart language. So, knowing this language is crucial for success in the framework. Let's start by writing some code to understand the basics of the syntax and the available ...