Taking Flutter to the Web E-Book

Damodar Lohani

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 213

Veröffentlichungsjahr: 2022

Beschreibung

Using a shared codebase in addition to an extensive range of tools in the Flutter ecosystem optimized for browsers, the Flutter framework has expanded to enable you to bring your mobile apps to the web. You’ll find out how web developers can leverage the Flutter framework for web apps with this hands-on guide.
Taking Flutter to the Web will help you learn all about the Flutter ecosystem by covering the tools and project structure that allows you to easily integrate Flutter into your web stack. You’ll understand the concepts of cross-platform UI development and how they can be applied to web platforms. As you explore Flutter on the web, you'll become well-versed with using Flutter as an alternative UI platform for building adaptive and responsive designs for web apps.
By the end of this Flutter book, you'll have built and deployed a complete Flutter app for the web and have a roadmap ready to target the web for your existing Flutter mobile apps.

Leseprobe

Taking Flutter to the Web

Learn how to build cross-platform UIs for web and mobile platforms using Flutter for Web

Damodar Lohani

BIRMINGHAM—MUMBAI

Taking Flutter to the Web

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Sofi Rogers

Senior Content Development Editor: Rakhi Patel

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Language Support Editors: Sofi Rogers and Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Manju Arsan

Production Designer: Shyam Sundar Korumilli

Marketing Coordinator: Anamika Singh

First published: October 2022

Production reference: 1280922

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80181-771-4

www.packt.com

To my father, astrologer Pandit Ojaraj Upadhyaya Lohani, and my mother, Gita Lohani, for their sacrifices, support, and encouragement. To my wife, Pooja, for being a loving partner, and to my children, for their unfathomable love and respect.

– Damodar Lohani

Contributors

About the author

Damodar Lohani is a software engineer at Appwrite. He is also a Google Developer Expert for Flutter and Dart. He has been working in the industry as a full stack developer specializing in different technologies since 2012 for diverse clients. He also runs the Flutter Kathmandu (https://meetup.com/flutter-kathmandu) community and organizes Flutter meetups in Kathmandu to help Flutter enthusiasts come together and help each other out. He is also a speaker and mentor; he has spoken at events such as Flutter Vikings and Flutter Yatra and mentored at numerous hackathons and events in Nepal. He is also actively involved in open source building and sharing his own open source projects as well as contributing to other open source projects. You can find his open source projects at https://github.com/lohanidamodar.

In 2015, he graduated with a BSc in computer science and information technology from Tribhuvan University, Kathmandu, Nepal. He has been using Flutter to build mobile and web applications for over 3 years.

I want to thank all the people who have been directly and indirectly responsible for making this book a success. I want to thank my wife Pooja for her unquestionable support during my late nights and early endeavors to finish the content of this book in time. I want to thank my parents for their unrestricted love and support. I want to thank my children, for they have sacrificed their personal time with me to let me work in peace to complete this book.

I want to thank Eldad Faux, founder of Appwrite, and my teammates at Appwrite for always supporting and motivating me to complete this book. I want to thank all my friends and relatives who are directly and indirectly involved in getting me here in life.

About the reviewer

Adby Santos has a degree in information technology from UFERSA. He is a co-organizer and contributor in Flutterando, one of the world’s biggest communities about Flutter, and he now works at FTeam, a mobile apps specialist organization, as a Flutter development specialist. He is also a speaker and consultant who has spoken at and moderated events such as Flutter Global Summit by Geekle. He also writes weekly about his professional and personal experiences on his LinkedIn. 

Table of Contents

Preface

Part 1: Basics of Flutter Web

1

Getting Started with Flutter on the Web

Technical requirements

Introduction to Flutter and Flutter on the web

Why you should learn Flutter on the web

What you can build with Flutter on the web

Progressive Web Applications

Single-page applications

Existing mobile applications

Deciding when to use Flutter on the web

Making and running a new Flutterweb project

Flutter on the web for web developers

Flutter as a UI framework

Flutter on the web for mobile developers

Official Flutter documentation

Summary

2

Creating Your First Web App

Technical requirements

Creating a new Flutter project with Flutter web

Using basic widgets

Building layouts

Summary

3

Building Responsive and Adaptive Designs

Technical requirements

What is responsive and adaptive design?

Responsive design

Adaptive design

Why there’s a need for responsive and adaptive design in Flutter

Responsive and adaptive design tools you may have known and used

Tools and techniques available for responsive and adaptive design

Making our app responsive and adaptive

Defining metrics for responsive design

Updating a featured section to be responsive

Modifying the footer

Making our app input-ready

Updating navigation to be responsive

Summary

Part 2: Flutter Web under the Hood

4

Flutter Web under the Hood

Technical requirements

How does the Flutter Engine produce web apps?

Different types of web renderers and their advantages and disadvantages

HTML renderer

CanvasKit renderer

Choosing between the HTML and CanvasKit renderers

Loading time

Data usage

Text fidelity

Performance and uniformity

Command-line options

Runtime configuration

Summary

5

Understanding Routes and Navigation

Technical requirements

The basics of navigation in Flutter

An introduction to Navigator 2.0

Implementing Navigator 2.0 in our app

Summary

6

Architecting and Organizing

Technical requirements

The need for properly scalable architecture

Organizing files and folders

Naming conventions

MVVM architecture

The model

The view model

The view

Implementing MVVM architecture

Setting up for authentication

Summary

Part 3: Advanced Concepts

7

Implementing Persistence

Technical requirements

The need to persist data

The tools and techniques available for data persistence

Persisting data with local storage using the shared_preferences plugin

Creating a theme mode service

Creating a theme mode view model

Integrating our view model in a widget

Persisting data using HiveDB

Setting Up HiveDB

Writing a watchlist service

Creating a watchlist view model

Integrating a view model into views

Creating a watchlist page

Summary

8

State Management in Flutter

Technical requirements

Understanding the basics of state management

The options available for state management

Provider

Riverpod

Redux

BLoC

MobX

An introduction to Riverpod

Understanding Providers

Creating a provider

Reading a provider

Implementing Riverpod in our app

Summary

9

Integrating Appwrite

Technical requirements

What is Appwrite?

Installing Appwrite

Installing Appwrite in DigitalOcean servers

Installing Appwrite locally or in a VPS

Setting up an Appwrite project

Installing and configuring Appwrite’s SDK for Flutter

Authenticating with Appwrite

Using Appwrite’s database to persist data

Creating a Database and a collection

Adding a function to create Database

Adding a function to create collections and attributes

Adding course documents and listing them on the app

Updating the watchlist functionality using Appwrite’s database

Summary

10

Firebase Integration

Technical requirements

What is Firebase?

Getting started with Firebase

Installing and configuring Firebase SDKs for Flutter

Authentication with Firebase

Using Firestore Database to persist data

Configuring Firestore Database

Adding course documents

Listing the courses in our application

Updating the watchlist functionality using Firestore Database

Summary

11

Building and Deploying a Flutter Web Application

Technical requirements

Building and deploying your first web app

Configuring a PWA

Introduction to PWAs

Customizing Flutter PWAs

Automating with GitHub Actions

Writing a GitHub action for deployment

Enabling GitHub Pages

Summary

Index

Other Books You May Enjoy

Part 1: Basics of Flutter Web

In this part of the book, you will be introduced to the web platform and the importance of learning Flutter web.

This part comprises the following chapters:

Chapter 1, Getting Started with Flutter on the Web Chapter 2, Creating Your First Web AppChapter 3, Building Responsive and Adaptive Design

1

Getting Started with Flutter on the Web

Flutter recently has become a very popular choice for building cross-platform applications. Flutter has gained a lot of popularity among mobile application developers and start-ups. With the introduction of stable web support and the preview of support for desktop, Flutter now supports building on six different platforms. In this chapter, we will learn how we can get started with Flutter web development.

By the end of this chapter, you will have a good understanding of the basics of Flutter on the web. You will understand what Flutter on the web is and how to get started with it. You will also understand how Flutter on the web is different from regular web and mobile development. The knowledge you gain in this chapter will also help you understand what you can build with Flutter on the web and when to use it.

In this chapter, we will cover the following main topics:

Introduction to Flutter and Flutter on the webWhy you should learn Flutter on the webWhat you can build with Flutter on the webMaking and running a new Flutter web projectFlutter on the web for web developersFlutter on the web for mobile developersOfficial Flutter documentation

Technical requirements

The technical requirements for this chapter are as follows:

A computer with a decent spec that can run Flutter. You can read the official Flutter getting started documentation for the required spec. Visit https://flutter.dev/docs/get-started/install and select your operating system to see the system requirements.Flutter installed and running with web support enabled.

You can download the latest code samples for this chapter from the book’s official GitHub repository at https://github.com/PacktPublishing/Taking-Flutter-to-the-Web/tree/main/Chapter01/chapter1_final.

Introduction to Flutter and Flutter on the web

Imagine being able to write code in one language/framework and deploy it on six different platforms, with some of those platforms having completely different setups in terms of both UI and UX. This has been made possible by Flutter in a way that allows developers to respect the norms of each platform, enriching developers with the tools and techniques to develop on each of these platforms with a native feel. A cross-platform development framework has been needed by developers for a long time now, because of the high costs and length of development time for native code on each platform. Many frameworks have tried, but none of them have succeeded in the way that Flutter has. Flutter has worked openly in the community in close connection with developers to resolve their issues and problems. Focusing both on the developer experience as well as the native feel and performance of applications, Flutter has become a great tool for cross-platform application development.

Figure 1.1 – Flutter, a cross-platform UI framework

Imagine developing a mobile application for Android and iOS, and imagine writing the same code without any changes (or with just a few tweaks) and running on the web while maintaining the same amount of functionality, or more. Imagine that same code deploying native desktop apps for Mac, Windows, and Linux. Yes, that’s now possible with Flutter.

From Flutter version 2.0, Flutter web support has become stable. This means we are now able to build Android, iOS, and web apps from a single code base. Flutter’s web support delivers the same experiences on the web as on mobile. Using the same sets of widgets that you use to build a UI for mobile applications, you can now build and deploy web applications. This enables developers to build feature-rich, interactive, and graphics-intense web applications with Flutter.

However, you have to understand that as Flutter is an app-centric UI framework, it is different from traditional web development. We are not writing HTML, CSS, and JavaScript (JS). Instead, we’re developing web apps using the same widgets that we use to develop mobile applications with Flutter. Later on in this chapter, we will see how Flutter is different from traditional web development with HTML, CSS, and JS, and how to take advantage of those differences.

Flutter is a lucrative framework to learn. With its plugins and developer tooling ecosystem, the Flutter framework has become one of the best tools for cross-platform application development in recent years.

Why you should learn Flutter on the web

If you are already developing mobile applications with Flutter, imagine the same code base deploying to the web with only a few or no tweaks required. Imagine not even having to write native code most of the time. If you don’t know much about the web, it doesn’t matter – with Flutter, you don’t need to. However, I do suggest gaining basic knowledge of the web as a platform and how it’s different from mobile applications. We will discuss this topic later in this chapter.

If you are a developer looking to enhance your toolbox, improve your career, and you are interested in mobile development, Flutter is the right choice for 2022. Not only is Flutter popular among developer communities, but it also has lots of job opportunities in the industry as Flutter has become one of the best cross-platform frameworks of choice among companies as well as developers.

It’s easy to learn Flutter as there are lots of resources online. There are tons of free and paid courses, articles, and videos. Thanks to Flutter being a popular choice in the community and being open source, many developers have created a lot of free content around it. There are thousands of open source example projects on GitHub, from small examples to full-fledged real-world applications. Having this amount of references makes it easy to learn. As Flutter is so popular among the developer community, many problems you may have while learning Flutter will have already been solved by the community. You can easily find answers on platforms such as GitHub and Stack Overflow.

Those of you who are confused about which framework to learn, as there are many alternatives, such as Kotlin Multiplatform, .NET MAUI, React Native, Ionic, Apache Cordova, and more that I may not even know about, I implore you to try Flutter at least once. I myself have tried both React Native and Flutter, and later have completely switched to Flutter as I love the whole ecosystem of tools it provides.

What you can build with Flutter on the web

We can build any kind of app in Flutter and then successfully port it to the web. Does that mean we should build all web apps with Flutter? If not, how do we decide what and what not to build with Flutter on the web? The following scenarios are some examples of when it would be beneficial to choose Flutter instead of traditional forms to build web applications. You can also refer to these great case studies of applications built with Flutter on the web available on the official Flutter documentation while deciding what kind of applications benefit from Flutter on the web:

Supernova (https://flutter.dev/showcase/supernova)Rive (https://flutter.dev/showcase/rive)iRobot (https://flutter.dev/showcase/irobot)Flutter Gallery (https://gallery.flutter.dev/)

And here are some community examples, built with Flutter on the web:

Flutterando Community (https://flutterando.com.br/#/)Flutter Shape Maker (https://shapemaker.web.app/#/)Rows Spreadsheet App (https://rows.com/)

Progressive Web Applications

Progressive Web Applications (PWAs) are a quite recently introduced form of web application that tries to bring the best of both worlds – applications and the web. We will learn more about PWAs later, in Chapter 11, Building and Deploying a Flutter Web App. Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX that is the same as Flutter’s mobile application. So, at the moment, Flutter is a very suitable choice for building a PWA.

Single-page applications

With Flutter being a client-side framework, it is a great option for building complex standalone web apps that are rich with graphics and interactive content to reach end users on a wide variety of devices.

Existing mobile applications

If you already have a mobile application built with Flutter and want to target new users on a web platform, Flutter on the web would be a great choice. With few or no modifications to your existing code, you will be able to easily port your existing application to the web and target a wide range of users and devices.

Now, before we dive into developing awesome web apps using Flutter, read and keep in mind the following paragraph from the official Flutter documentation (https://flutter.dev/web):

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich, flow-based, static content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.

Here, we need to understand that Flutter is an app-centric UI framework designed to build interactive experiences, which may not be suitable for all kinds of websites and web applications.

Deciding when to use Flutter on the web

This is not a definitive guide to help you decide when to use Flutter on the web. However, this might help you in the process of deciding whether or not to build your next web app with Flutter.

With web applications, one thing I can say for certain is that if you have the time and budget to build a native web application, build it. Build a native web application with HTML, CSS, and JS, the languages of the web. Also, if the web is the primary focus of your business, and most of your target customers are on the web, I suggest going native.

However, in scenarios in which you have mobile applications built with Flutter and most of your customers are on mobile applications but you want to quickly try the web platform to get more target customers and get more traction for your business, Flutter on the web would be a quick and cost-effective choice.

When you are planning to build a PWA or a graphics-intense, interactive application, Flutter would still be a suitable choice. Choosing Flutter will also allow you to build for mobile and desktop platforms using the same code base.