Unlock the Power of Cross-Platform Development with Flutter 2.0
The days of requiring multiple engineers to launch an app on mobile platforms and the web are behind us. With Flutter 2.0, you can seamlessly ship your existing mobile app as a web app with minimal code changes.
What Can You Build with Flutter 2.0?
Flutter 2.0 enables you to develop:
- Single-page apps (SPAs) that run on a single page and update dynamically without loading a new page
- Progressive web apps (PWAs), which can be run as desktop apps
In this tutorial, we’ll guide you through the process of converting a Flutter mobile app to a web app and deploying it on Firebase Hosting.
Building a Shopping App Example
We’ll create a simple Flutter app that displays a list of shopping categories. Clicking a category opens a list of available products, and users can add and remove products from the cart. Our goal is to ship this app to the web with the same code.
Creating a Web Directory for Your Flutter App
To convert a Flutter mobile app to a web app, start by creating a web directory using the following command:
This will create the web directory at the root of the project beside the Android and iOS folders.
Running the App in the Browser
Select Chrome (for Mac or Linux systems) or Edge (for Windows) and hit the Run button. Voilà! Your Flutter app, initially designed for mobile, is now running on the web.
Verifying Plugin Support
Before proceeding, ensure that all packages and plugins used in the mobile app have a web version available. You can check this on pub.dev by searching for the package name and looking for the web label in the search result.
Making the App Responsive
Web browsers offer ample space, so it’s essential to rethink the app’s UI for a rich experience. We’ll use the LayoutBuilder widget to accommodate varying screen sizes and provide different UI/UX accordingly.
Handling Navigation
The main difference between mobile and web versions of our app lies in navigation. We’ll use the beamer package to handle navigation inside the app and enable users to navigate through the address bar in the browser.
Enabling Browser- and Desktop-Specific Interaction
To provide a better experience, we’ll enable some browser- or desktop-specific interactions:
- ScrollBar: Show the scrollbar beside the product list to indicate scroll position
- Mouse: Change the cursor when hovering over the product
- Keyboard shortcut: Pressing the ALT key places a product in the user’s cart
Deploying Your Flutter App to the Web
Finally, we’ll deploy our newly converted shopping app using Firebase Hosting. Follow the official Firebase Hosting docs for detailed hosting instructions.
Check out the web version of our Flutter mobile app here. The full code used for this example is available on GitHub.
LogRocket: Full Visibility into Your Web Apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Try it for free.