Book Image

Taking Flutter to the Web

By : Damodar Lohani
Book Image

Taking Flutter to the Web

By: Damodar Lohani

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Taking Flutter to the Web
Damodar Lohani
Oct, 2022 | 206 pages
Small book image
Cross-Platform UIs with Flutter
Ryan Edge | Alberto Miola
Aug, 2022 | 260 pages
Small book image
Managing State in Flutter Pragmatically
Waleed Arshad
Nov, 2021 | 246 pages
Small book image
Flutter Cookbook
Simone Alessandria
May, 2023 | 712 pages
Table of Contents (17 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1: Basics of Flutter Web
Part 1: Basics of Flutter Web
Free Chapter
2
Chapter 1: Getting Started with Flutter on the Web
Chapter 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
Making and running a new Flutterweb project
Flutter on the web for web developers
Flutter on the web for mobile developers
Official Flutter documentation
Summary
3
Chapter 2: Creating Your First Web App
Chapter 2: Creating Your First Web App
Technical requirements
Creating a new Flutter project with Flutter web
Using basic widgets
Building layouts
Summary
4
Chapter 3: Building Responsive and Adaptive Designs
Chapter 3: Building Responsive and Adaptive Designs
Technical requirements
What is responsive and 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
Summary
5
Part 2: Flutter Web under the Hood
Part 2: Flutter Web under the Hood
6
Chapter 4: Flutter Web under the Hood
Chapter 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
Choosing between the HTML and CanvasKit renderers
Summary
7
Chapter 5: Understanding Routes and Navigation
Chapter 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
8
Chapter 6: Architecting and Organizing
Chapter 6: Architecting and Organizing
Technical requirements
The need for properly scalable architecture
Organizing files and folders
MVVM architecture
Implementing MVVM architecture
Summary
9
Part 3: Advanced Concepts
Part 3: Advanced Concepts
10
Chapter 7: Implementing Persistence
Chapter 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
Persisting data using HiveDB
Summary
11
Chapter 8: State Management in Flutter
Chapter 8: State Management in Flutter
Technical requirements
Understanding the basics of state management
The options available for state management
An introduction to Riverpod
Implementing Riverpod in our app
Summary
12
Chapter 9: Integrating Appwrite
Chapter 9: Integrating Appwrite
Technical requirements
What is Appwrite?
Installing Appwrite
Setting up an Appwrite project
Installing and configuring Appwrite’s SDK for Flutter
Authenticating with Appwrite
Using Appwrite’s database to persist data
Summary
13
Chapter 10: Firebase Integration
Chapter 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
Summary
14
Chapter 11: Building and Deploying a Flutter Web Application
Chapter 11: Building and Deploying a Flutter Web Application
Technical requirements
Building and deploying your first web app
Configuring a PWA
Automating with GitHub Actions
Summary
15
Index
Index
Why subscribe?
16
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts

The basics of navigation in Flutter

Any production-level application requires multiple pages on which to display information. In order to manage multiple pages, we need to provide proper navigation support for users. Flutter provides different APIs for navigation. In this section, we will look at the imperative navigation API provided by an early version of Flutter, which is still effectively used. There are some shortcomings of this type of navigation, which is why the new declarative navigation API was introduced. We will look into these shortcomings, and in the next section, we will look at the new declarative navigation API.

To use Flutter’s imperative navigation, we need to understand two terms:

  • Navigator: Navigator is a widget that manages a stack of Route objects.
  • Route: Route is an object managed by Navigator that represents a screen. This is typically implemented by classes such as MaterialPageRoute.

When using imperative navigation, we use various...

Previous Section
End of Section 3
Next Section