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

Building and deploying your first web app

Let’s start with the most important topic, building and deploying Flutter web applications. In this section, we will first build our application and then deploy it to Netlify. We will mostly use the command line for this. First, open the command line and navigate to the folder containing your Flutter web project. Then, run the following command:

flutter build web

This creates a release build of the web application for your Flutter project that you can find in <project_root>/build/web. The release build is an optimized build of the Flutter application that is ready to be deployed in production. The release build will have the following structure:

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      &lt...
Previous Section
End of Section 3
Next Section