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

Installing and configuring Appwrite’s SDK for Flutter

Integrating Appwrite in Flutter applications is very simple using the official Flutter SDK. So, in this section, we are going to install and configure Appwrite’s Flutter SDK in our application by following these steps:

  1. First, let’s add the Appwrite package under dependencies in the pubspec.yml file:
    dependencies:
     appwrite: ^8.0.0

Remember to run flutter pub get if it’s not automatically run by the IDE to get the dependencies.

  1. Next, we will import and configure Appwrite’s SDK. We will do that by creating the lib/infrastructure/res/appwrite.service.dart file:
    import 'package:appwrite/appwrite.dart';
  2. Configure the SDK by providing the endpoint and project ID. You should be able to get both of these values for your Appwrite installation from your console, as we saw in the previous section:
    class AppwriteService {
  static AppwriteService...
Previous Section
End of Section 6
Next Section