BUILDING&DEPLOYING FLUTTER WEB APPS

- SARANIYA S

➢ Introduction to flutter, web development

• In general, developing a mobile application is a complex and challenging task. There are
many frameworks available to develop a mobile application. Android provides a native
framework based on Java language and iOS provides a native framework based on
Objective-C / Swift language.
• To create an app for both Android and iOS, we usually need to code in two different
languages. To make this easier, there are frameworks that support both operating
systems. These range from simple HTML-based frameworks, which use HTML and
JavaScript, to more advanced frameworks that handle complex language translation for
native performance.
• In this scenario, Flutter – a simple and high performance framework based on Dart
language, provides high performance by rendering the UI directly in the operating
system’s canvas rather than through native framework.
• Flutter also offers many ready to use widgets (UI) to create a modern application. These
widgets are optimized for mobile environment and designing the application using
widgets is as simple as designing HTML.
➢ Flutter – Basics
• In this section, you’ll learn the fundamentals of Flutter. Flutter is a toolkit created by
Google that lets developers build apps for mobile, web, and desktop using the same
code. It uses the Dart programming language and comes with ready-to-use widgets for
designing user interfaces. Flutter’s special feature, hot reload, allows developers to see
changes instantly as they code, making development faster.
➢ Web specific features in flutter
❖ Web-Specific Widgets:
Widgets like Link (for web navigation) and Selectable Text (for copy-pasting text) make web
interactions smoother.

❖ Offline Support:
Using service workers, Flutter Web apps can work offline and cache assets to improve loading times.

Rendering Options:

• HTML Renderer: Best for simple, text-heavy apps.

• Canvas Kit Renderer: For complex, high-quality graphics (like animations).

❖ JavaScript and DOM Access:

You can interact with JavaScript code and the browser’s DOM directly for advanced web-specific
functionality.

➢ State management in flutter web

In Flutter web apps, state management is essential for handling and synchronizing the application's
data, user interactions, and UI updates. Here are some popular approaches to state management in
Flutter:

1. Provider

• Description: Provider is a wrapper around InheritedWidget, which makes it easy to manage

and inject state across the widget tree. It's highly performant and simple to set up, making it
ideal for basic to intermediate state management.

• Usage: Ideal for smaller apps or individual feature-level state management.

• Advantages: Lightweight, easy to learn, and follows the reactive pattern.

• Limitations: Not suited for very complex state management or when managing very large
applications.

2. Riverpod

• Description: Riverpod builds on Provider but offers a more robust and safer API. It allows for
state sharing without depending on the widget tree, making it flexible and powerful.

• Usage: Suitable for medium to large-scale applications.

• Advantages: Enhanced debugging, reduced boilerplate, and improved testability.

• Limitations: Steeper learning curve compared to Provider.

3. Bloc (Business Logic Component)

• Description: Bloc is a reactive state management solution that separates business logic from
UI using the Stream API. It’s a good choice for complex applications requiring well-organized
business logic.

• Usage: Ideal for larger applications with intricate business logic.

• Advantages: Promotes clear separation of concerns, testability, and scalability.

• Limitations: Can be verbose and complex to implement, especially for simpler apps.

➢ Integrating Backend Services with Flutter

• API Documentation and Specification:

This documentation should include details about endpoints, data formats (such as JSON or
XML), authentication mechanisms, request/response structures, and any specific guidelines or
limitations. Having a thorough understanding of the backend services will facilitate smoother
integration.
 • API Versioning and Future Compatibility:

As your app evolves and backend services undergo changes, maintaining API compatibility
becomes important. Follow API versioning practices and design your integration in a way that allows
for future updates without disrupting existing functionality.

• Secure Data Transmission:

Ensure secure data transmission between your Flutter app and the backend server by
implementing appropriate encryption protocols like HTTPS/TLS. This protects sensitive user data
from eavesdropping and unauthorized access.

➢ build a complete flutter web application

1. Come up with an idea

You don’t need an app for every business idea. Do your research first, identify the problem
you want to solve and try to find solutions. Interview people who experience the problem and ask if
they have possible solutions. If you feel a web application will streamline work, proceed to the next
stage.

2. Market research

You must have an accurate understanding of the user, their problem, and the scope of the
problem. Research if there are other ways to solve the problem out there. Getting insight into the
user and the competition helps inform the technical direction of the web app.

3. Define the app’s functionality

Come up with a list of features that will address the problem. But keep your distance and add
only a few functionalities. Apps with more features take longer to build. Only focus on the features
that solve your target market's problems.

4. Plan the workflow

If your app has competitors, sign up for their free trials and use the solutions. Pay attention to
the workflow and note what’s good and bad. Sit down and sketch different workflows for your app
that is better than the competition.

5. Design your database

A database allows you to store data securely to access it later. The data you store, and user
functions will determine the type of database required to run your web app.

6. Build the frontend

The frontend is what users see and interact with. It’s the visual element of the application and
is developed with coding language. The framework is set up on a no-code/low-code platform, and
almost no coding is needed to build a frontend. Not all web applications need frontend frameworks.

7. Build the backend

The backend manages your data, servers, databases, and everything users can’t see in a web
application. Building a backend is a job for skilled developers, but a no-code/low-code tool can take
away many of the complexities.
8. Test and troubleshoot

Test the app before you publish it. Use it in run mode and see if it functions as expected. If
something is wrong, diagnose the problem using the no-code/low-code platform. Some platforms
have a debug mode and issue checker to make your job easy.

9. Deploy the web app

First, choose a host for your web app to make it available on the cloud. Users will be able to
access it from anywhere in the world. Next, deploy the web app. This step involves getting your web
application from your computer to your cloud hosting.

➢ Flutter Performance Optimization

Ignore Rebuilding of Widget:

Flutter widgets are constructed utilizing a modern set of libraries that resembles React Native.
The fundamental concept is that you make your UI out of widgets. Widgets showcase what their
formation should represent to end users, given their present structure and state.

Now the situation is rebuilding the widget boosts the load time. Here is how. When a user comes
across the elements in the widget, the complete view in that widget is refreshed.

Prefer Async/Await:

An async keyword would try to assist you in pivoting your operations to the asynchronous mode
by implementing the return kind of operation to the Future. Async illustrates the operations as
asynchronous, and it could take a bit to get the results. If the return type is not Future, there are
possibilities of various issues in the code. Functions label ‘async’ must have a return type assignable
to ‘Future.’

Reduce the Size of the App

Adding all the attributes, widgets, and scripts appears quite doable. But that also takes lots of
space within it, resulting in an increase in the app size. But that’s not right. And here is what we can
do to diminish the size of the Flutter app.

Terminate utilized resources:

There are manual and automatic procedures for deleting undesirable resources. In the manual
procedure, you have to select the individual files manually and then delete those which are not
essential.

The automatic procedure utilizing the tools is with the Android Studio pursuing the given steps
below:

• Right Click Project,

• Pick Refactor from the menu

Create And Portray Frames Within 16ms:

The appearance is separated into 2 domains: structure and picture. Flutter apps are optimized
when you can equally separate the structure and picture for about 8ms.
 Coders have 8ms for structure and another 8ms for the image to induce a 60hz display. It won’t affect
the grade of the app. Instead, it will boost the battery duration and preserve the temperature of the
system.

➢ Deploying flutter web application

Here’s a simple guide to deploy a Flutter Web application:

1. Build the Web App

Run this command to build your app for the web:

bash

Copy code

flutter build web

This will generate the build files in the build/web folder.

2. Choose a Hosting Platform

Here are some easy-to-use platforms for hosting your Flutter web app:

Option 1: Firebase Hosting

1. Install Firebase CLI:

bash

Copy code

npm install -g firebase-tools

2. Login to Firebase:

bash

Copy code

firebase login

3. Initialize Firebase: Run this in your project folder:

bash

Copy code

firebase init

Select "Hosting" and choose the build/web folder as the public directory.

4. Deploy: Run the following to deploy:

bash

Copy code
firebase deploy

Firebase will give you a URL where your app is live.

Option 2: GitHub Pages

1. Build the app:

bash

Copy code

flutter build web

2. Deploy using GitHub Pages:

o Go to your GitHub repository and create a new branch called gh-pages.

o Push the contents of build/web to that branch.

3. Enable GitHub Pages: Go to your repository settings, scroll to "GitHub Pages," and select gh-
pages as the source branch.

Your app will be available at https://<username>.github.io/<repository-name>.

Option 3: Netlify

1. Sign up for Netlify at Netlify.

2. Deploy your app:

o Drag and drop the contents of the build/web folder into the Netlify UI.

Netlify will provide a URL where your app is hosted.

3. Access Your App

After deploying, visit the provided URL to see your app live on the web!

➢ Progressive web application with flutter

Welcome aboard, developers! In this exciting journey, we will delve into the fascinating world of
Progressive Web Applications (PWAs) and uncover the power of Flutter in building these web
wonders.

PWAs are the latest buzz in app development. These web applications masquerade as native apps
and offer many advantages, such as working offline and providing engaging user experiences. With
the right blend of mobile apps' versatility and websites' connectivity, PWAs command the best of
both worlds.

Combine the prowess of PWAs with the flexibility of Flutter. This Google-developed, open-source
technology is an ace in cross-platform app development. It allows you to craft beautiful, high-
performing applications from a single codebase for mobile, web, and even desktop. Google
announced last year that Flutter's web support is now stable, making it a gamut of possibilities for
developers targeting multiple platforms.

Understanding Progressive Web App and Flutter

Progressive Web Applications (PWAs) are next-gen mobile applications that offer a hybrid cross
between regular web browsers and mobile apps. They provide an immersive, full-screen experience
on the user's device without the hassle of a structured approval process. PWAs can be easily stored
on the home screen, push notifications, and even work offline while being highly user-friendly.

Google's substantial support for PWAs in Flutter breathes fresh life into cross-platform app
development. It combines the characteristics and benefits of native and web apps, fitting together
like pieces of a puzzle to form a sophisticated whole.

Setting up the Flutter Environment

Before developing our PWA, we must ensure our toolkit is ready. Here, our toolkit refers to the
Flutter environment.

Firstly, you need to install the Flutter SDK. Visit the official Flutter installation guide and follow the
detailed steps mentioned there. It would be best if you had an editor that supports Flutter. Visual
Studio Code, Android Studio, and IntelliJ are excellent picks that offer robust Flutter and Dart plugins.

Ensure everything runs correctly once Flutter is set up and your editor is installed. Flutter Doctor is a
handy command that checks your environment and displays a report of the status of your Flutter
installation:

1flutter doctor

The command checks your system and lets you know if there are any dependencies you need to
install to use Flutter. The objective is to create a fully functional Flutter environment ready for action.

Creating a New Flutter Project

A new Flutter project can be created by running the simple command flutter create [project_name].

Here’s a quick guide to set up a new Flutter project:

Fire up your terminal, navigate to the directory where you want to store your project, and run:

1flutter create flutter PWA

This command creates a new Flutter project named flutter PWA. The project directory will have the
following structure:

1flutter_pwa/

2 android

3 iOS

Building a Basic PWA with Flutter

Now that we have reached this far, let's begin our coding voyage into the Flutter universe. Our
primary objective is to convert our existing Flutter project into a progressive web app (PWA).

First, we will rewrite our lib/main.dart file with a simple MaterialApp with an AppBar. It would look
something like this:

1import 'package:flutter/material.dart';

2
3void main() {

4 runApp(MyApp());

5}

7class MyApp extends StatelessWidget {

8 MyApp({Key key}) : super(key: key);

10 @override

11 Widget build(BuildContext context) {

12 return MaterialApp(

13 title: 'Flutter PWA Demo',

14 theme: ThemeData(

15 primarySwatch: Colors.blue,

16 ),

17 home: MyHomePage(),

18 );

19 }

20}

21

22class MyHomePage extends StatelessWidget {

23 MyHomePage({Key key}) : super(key: key);

24

25 @override

26 Widget build(BuildContext context) {

27 return Scaffold(

28 appBar: AppBar(

29 title: Text('Building PWAs with Flutter'),

30 ),

31 body: Center(

32 child: Column(

33 mainAxisAlignment: MainAxisAlignment.center,
34 children: <Widget>[

35 Text(

36 'Welcome to Flutter PWA Development',

37 ),

38 ],

39 ),

40 ),

41 );

42 }

43}

After finishing up with the code, you will need to navigate into the project's root directory and run
the app in Chrome by executing the following command:

1flutter run -d chrome

Flutter creates a local server hosting your web app by running the above command. Open your
browser and navigate to localhost:8080 to see your application.

Testing and Debugging the PWA

Testing and debugging are integral aspects of app development. Let's explore how we can check if
the PWA works perfectly.

To confirm our Flutter web app is indeed a PWA, we need to verify two things:

1. The app must run offline.

2. The app can be installed on the device.

For this, we can use Google Chrome's built-in developer tools.

First, we navigate to the "Application" tab, then to the "Service Workers" from the left-hand menu.
Here, we can see that the service worker is installed and running. We can also test whether our PWA
is functioning offline by checking the "offline" box.

Create a release build of your app in Chrome to test the functionalities:

1flutter run -d chrome --release

To install your PWA on your device, you can find an "+" icon on the right-hand side of the URL bar on
top. Clicking this icon installs your PWA on your device. If clicking the "+" does not do anything or
does not appear, it suggests there's some error in your PWA.

Debugging in Chrome Developer Tools significantly helps to locate and fix unexpected behavior in
your code.

Deploying the PWA

Once satisfied with your PWA, the final step is deploying it on a server. Flutter does not specify a
preferred method for deploying your web app, allowing you to deploy your app the way you would
any static website.

Here are the general steps to follow:

1. Build the app using Flutter Build Web.

2. A build/web directory gets created, containing your app's built version, including HTML, JS,
CSS, fonts, and other assets.

3. Copy the output directory files, and follow the deployment instructions for your selected
hosting option. ( Here are some examples of hosting solutions: Firebase, GitHub Pages, or a
self-hosted server with Nginx, Apache, etc.)

That’s it! Congrats on deploying your first PWA with Flutter. Your users can now enjoy a web
experience that feels like a native app.

➢ Debugging and testing flutter web apps:

1. Running the Web App Locally

Run your app in the browser to test and debug it:

bash

Copy code

flutter run -d chrome

This opens your app in Chrome (or your default browser) in debug mode.

2. Using Developer Tools (DevTools)

• Open Chrome DevTools by pressing F12 or Ctrl + Shift + I.

• In the "Flutter" tab of DevTools, you can:

o Inspect widgets and the widget tree.

o View logs and errors.

o Track performance (e.g., FPS, CPU usage).

3. Console Logs

Use print() statements to log messages in the browser’s console:

dart

Copy code

print('Hello, Flutter Web!');

Check the console in Chrome DevTools for output.

4. Testing Offline (Service Worker)

• Test offline behavior by disabling network in Chrome DevTools: