Taking Flutter to the Web: Learn how to build cross-platform UIs for web and mobile platforms using Flutter for Web
A web developer’s guide to using Flutter for building responsive and adaptive web UIs using mobile solutions
- Build a native, mobile-like experience for your web apps using Flutter
- Explore a systematic and synchronized learning path for web developers to learn Flutter
- Design an MVVM structure for scalability and performance with this practical guide
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.
What you will learn
- Understand the concepts necessary for designing, building, and deploying a Flutter web app
- Get the hang of Flutter internals to make the most of the framework
- Build complete web applications with Flutter from architecture to deployment
- Automate UI design for your web apps using Flutter
- Explore Flutter’s integration with Appwrite for backend development
- Discover advanced concepts in frontend web development, such as state management and PWA
Who this book is for
This book is for Flutter mobile developers and Dart programmers who want to consolidate their Flutter knowledge and use it to build responsive web applications.
Taking Flutter to the Web Contributors About the author About the reviewer 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 Part 1: Basics of Flutter 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 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 Chapter 2: Creating Your First Web App Technical requirements Creating a new Flutter project with Flutter web Using basic widgets Building layouts Summary Chapter 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 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 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 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 Chapter 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 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 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 Chapter 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 Chapter 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 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 Configuring Firestore Database Adding course documents Listing the courses in our application Updating the watchlist functionality using Firestore Database Summary Chapter 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 Why subscribe? Other Books You May Enjoy Packt is searching for authors like you Share Your Thoughts
How to download source code?
1. Go to:
2. In the Find a repository… box, search the book title:
Taking Flutter to the Web: Learn how to build cross-platform UIs for web and mobile platforms using Flutter for Web, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.