Flutter Projects

A practical, project-based guide to building real-world cross-platform mobile applications and games

Simone Alessandria

• Publisher: Packt Publishing
• Year: 2020
• Print ISBN: 9781838647773
• eBook ISBN: 9781838642532
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Learn Flutter and the Dart programming language by building impressive real-world mobile applications for Android and iOS

Key Features

• Learn cross-platform mobile development with Flutter and Dart by building 11 real-world apps
• Create wide array of mobile projects such as 2D game, productivity timer, movie browsing app, and more
• Practical projects demonstrating Flutter development techniques with tips, tricks, and best practices

Book Description

Flutter is a modern reactive mobile framework that removes a lot of the complexity found in building native mobile apps for iOS and Android. With Flutter, developers can now build fast and native mobile apps from a single codebase.

This book is packed with 11 projects that will help you build your own mobile applications using Flutter. It begins with an introduction to Dart programming and explains how it can be used with the Flutter SDK to customize mobile apps. Each chapter contains instructions on how to build an independent app from scratch, and each project focuses on important Flutter features.From building Flutter Widgets and applying animations to using databases (SQLite and sembast) and Firebase, you'll build on your knowledge through the chapters. As you progress, you'll learn how to connect to remote services, integrate maps, and even use Flare to create apps and games in Flutter. Gradually, you'll be able to create apps and games that are ready to be published on the Google Play Store and the App Store. In the concluding chapters, you'll learn how to use the BLoC pattern and various best practices related to creating enterprise apps with Flutter.

By the end of this book, you will have the skills you need to write and deliver fully functional mobile apps using Flutter.

What you will learn

• Design reusable mobile architectures that can be applied to apps at any scale
• Get up to speed with error handling and debugging for mobile application development
• Apply the principle of 'composition over inheritance' to break down complex problems into many simple problems
• Update your code and see the results immediately using Flutter's hot reload
• Identify and prevent bugs from reappearing with Flutter's developer tools
• Manage an app's state with Streams and the BLoC pattern
• Build a simple web application using Flutter Web

Who this book is for

This book is for mobile developers and software developers who want to learn Flutter to build state-of-the-art mobile apps. Although prior experience with Dart programming or Flutter is not required, knowledge of object-oriented programming (OOP), data structures and software design patterns will be beneficial.

Firing Up the App - Integrating Firebase into a Flutter App

Let's face it: developers tend to be lazy, so they always look for ways to build solid and maintainable software with the least possible effort. The good news is that Flutter and Firebase work well together so you can to build full-stack apps in record time, and this is what we'll be covering in this chapter.

The app we'll build in this project is an event app. Your user will be able to see the program of an event— for example, a developers' conference, a concert, or a business meeting—and, once authenticated, they will be able to select their favorite parts of the schedule. All the data will be saved remotely, in a Cloud Firestore database.

The following topics will be covered in this chapter:

• Creating a Firebase project
• Adding Firebase and Firestore to your app
• Reading data from a Firestore database and showing it in your Flutter app
• Implementing an authentication screen and connecting it to Firebase
• Writing data to a Firestore database (create, read, update, delete (CRUD))

Technical requirements

You'll find the completed app code on the book's GitHub repository at https://github.com/PacktPublishing/Flutter-Projects.

To follow along with the code examples in this book, you should have the following software installed on your Windows, Mac, Linux, or Chrome OS device:

• The Flutter Software Development Kit (SDK).
• When developing for Android: the Android SDK, easily installed by Android Studio.
• When developing for iOS: macOS and Xcode.
• An emulator (Android), a simulator (iOS), or a connected iOS or Android device with debugging enabled.
• An editor: Visual Studio Code (VS Code), Android Studio, or IntelliJ IDEA are recommended. All should have the Flutter/Dart extensions installed.
• For this chapter, a Google account is required to use Firebase.

Introducing Firebase

Firebase is a set of tools with which to build scalable applications in the cloud. Among those tools, you'll find authentication, storage, databases, notifications, and hosting.

You can actually choose between two databases: the Firebase Realtime Database and Cloud Firestore. In this chapter, we'll be using the Cloud Firestore database, which is a NoSQL document database that simplifies storing, querying, and updating data in the cloud. More importantly in the context of this book, you can use it as the backend of your iOS and Android apps, with no need to write the code for a web service and, in many cases, without writing any code at all for your server-side service.

Relational databases use tables to store data, with a fixed schema that all records must follow. For example, if you store user data, you can create a users table with three fields: user_id, name, and password. Each record in the table will follow the constraints (rules) you define when you design your table.

In relational databases, you store data in tables. The "columns" of the tables are called fields, and the "rows" of the table are called records. For example, if you store users, the table name might be Users, and the fields might be "Name" and "Surname". "John" - "Doe" and "Bill" - "Smith" are records.

A NoSQL database, on the other hand, is self-describing, so it does not require a schema. All its documents are JSON documents, and, theoretically, each document could have different fields and values (or key-value pairs). In the example we mentioned previously, in the users collection, the first user might have a user_id, name, and password, but the following could also contain a "user_role" field or a "user_age" field. Both documents would still be valid.

Another huge difference is the language used. SQL databases use Structured Query Language to define and manipulate data. This makes SQL databases easy to use and wide spread, but SQL requires you use predefined schemas to design the structure of your data.

In a NoSQL database, you have a dynamic schema and data is unstructured, and can be stored in many different ways.

Generally speaking, when you need to perform complex queries in multiple tables and you have structured data, SQL is the best option. When you don't need to perform queries that require several "JOINS" between tables and you want an easily scalable and fast solution, you would probably choose a NoSQL database.

As an added bonus, a backend created with Firebase can scale over Google server farms, so it's virtually limitless.

Project overview

The app we'll build in this chapter is an event app where the user will be able to see the program of an event, with the details of the schedule. All data will be hosted remotely, in a Firebase project. The events will be stored in a Cloud Firestore database.

Once authenticated, the user will be able to choose their favorite parts of the event by pressing a star icon. In this way, the "favorites" will be also saved remotely.

The following screenshot shows the app's main screen:

Another interesting aspect of the app is dealing with authentication. This is generally a cumbersome process, but the good news is that dealing with authentication with Firebase and Flutter is rather straightforward. You can see the app's authentication screen in the following screenshot:

Building the project should take about 3 hours.

Adding Firebase to your Flutter project

As mentioned before, Firebase is a set of tools that you can use to build applications in the cloud. As it's a cloud service, you won't need to install any software on your device. Firebase is operated by Google, so you will need a Google account to create your first project.

What are the advantages of using Firebase, instead of following the traditional approach of writing a client-side app, and a server-side (or backend) service?

The tools that are available within Firebase cover most of the services that you would typically have to build yourself, including authentication, databases, and file storage, just to name a few. The client that connects to Firebase—in our case, a Flutter app—interacts with these backend services directly, without any middleware server-side service. This means that, when you use the Firestore database, you'll write queries directly in your Flutter app! This is totally different from traditional app development, which usually requires both client and server software to be written, and it's probably the main advantage of using Firebase when developing an app that requires a backend service. You won't need to write, install, or maintain a web service using PHP, or Java, or C#. You'll deal with Firebase directly from your Flutter app.

Every project that involves the use of Firebase begins with the Firebase console. You can reach it at the following address: https://console.firebase.google.com/.

You will be asked to authenticate yourself before accessing the console. In the remote chance that you do not have any Google accounts, you can create one for free from the authentication page. So, let's begin, as follows:

1. The container of all services in Firebase is a project. So, we'll begin building our app by creating a new Firebase project.

A Firebase project is the top-level entity for Firebase. Each Firebase feature...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Hello Flutter!
• Miles or Kilometers? Using Stateful Widgets
• My Time - Listening to a Stream of Data
• Pong Game - 2D Animations and Gestures
• Let's Go to the Movies - Getting Data from the Web
• Store That Data - Using Sq(F)Lite To Store Data in a Local Database
• Firing Up the App - Integrating Firebase into a Flutter App
• The Treasure Mapp - Integrating Maps and Using Your Device Camera
• Let's Play Dice: Knockout - Creating an Animation with Flare
• ToDo App - Leveraging the BLoC Pattern and Sembast
• Building a Flutter Web App
• Appendix
• Assessment
• Other Books You May Enjoy