Things to Know Before Starting to Work on the Flutter Web App

Introduction

As you know every mob developer is now going to be attracted to the Flutter development because of its high profile & efficient features which allow every developer to get an easy touch to their development.

It’s good to have a connection with Android & iOS development. But yeah, with this stuff now mobile developers want to snatch the role of frontend developer as well!

How? Let me tell you and every mob developer is aware that Flutter has the power to implement the web app as well which contains the same code that we are using for the Android/iOS development. Probably, there will be some changes needed to comfort it & run it on the web app.

For example, if you take any app Flutter code and try to run it on the web app, surely it will not work. Flutter is a framework, not a magic stick!

So, Let me tell you why I am here. Of course, to guide those, who want to snatch the frontend developer’s job I mean who want to start with Flutter web development.

But, there are some important things you should know before starting:

✅ Packages must be used
✅ Setup & Execution
✅ Responsive Framework
✅ Bootstrapping
✅ CORS
✅ Navigation

🟠 Packages Must be Used

Flutter_web_plugin:

Inside your pubspec.yaml, you must add this,

dependencies:
flutter:
sdk: flutter
flutter_web_plugin:
sdk: flutter

Once you add the package you should need to mention a method to the main.dart called “usePathUrlStrategy()”.

kISWeb:

When you have to handle web with Android & iOS development as well. You should tell the system that you are using some specialization for web apps and to differentiate it you need to import the following:

import 'package: flutter/foundation.dart';

Which has a bool ‘kIsWeb’, which needs to be used to differentiate the cases between Android/iOS & web.

Other than this, according to the requirement and usage developer can use other packages.

🟠 Setup & Execution

What everyone should expect in the setup? No, I am not telling you how to create the project and all, I believe you are aware of all those things.
Here is the setup meaning, you should know how to run your app.

If you want to run your on the server portal whether it is standing, development, or Production environment. You don’t need any specific setup..you can directly run it by clicking the run button and check it on all the devices whether it is desktop, mobile, tablet, or anything. On the other side, If you want to use the local portal then you should need to do a setup.

Let’s take an example,

Suppose you want to use port 3000 and you need to inform the backend team, So they can add that port number to their environment list accordingly.
So, once they have done it you can check whether it is working or not by running the below command in the terminal:

flutter run -d chrome --web-port=3000

So, this will run your web application and can able to see the designed screen.

So, you can do it for Desktop.

For the tablet and mobile, you need to use the same local portal URL you have to use the same network for 3 of them.

🟠 Responsive Framework

If you want to be a web developer then every time you implement some feature or do the coding, should be in your mind that it will be responsive UI to every device.

So, to achieve this more easily and peacefully we have a library called responsive_framework.

By using this library we can set the responsive UI breakpoints as well to know to the system where we need to change the UI response.

For that, you should need to set a responsive breakpoint in your main.dart.

builder: (context, child) => ResponsiveBreakpoints.builder(
child: child!,
breakpoints: [
const Breakpoint(start: 0, end: 450, name: MOBILE),
const Breakpoint(start: 451, end: 800, name: TABLET),
const Breakpoint(start: 801, end: double.infinity, name: DESKTOP),
],
),
);

And you should need to use it like this:

if (ResponsiveBreakpoints.of(context).isDesktop) {
return DashboardWebPage(initialIndex: initialIndex);
} else if (ResponsiveBreakpoints.of(context).isTablet) {
return DashboardTabPage(initialIndex: initialIndex);
} else{
return DashboardMobPage(initialIndex: initialIndex);
}

Related read: The Comprehensive Guide to Flutter App Development

🟠 Bootstrapping

If we take this subject that much in detail, then I should need to write one more article on this. But for now, let me clear this up to what and where it will be used.

At the moment, Flutter Web apps start when their main.dart.js file is loaded and parsed. As a result, web developers have a difficult time integrating Flutter web apps into their sites (for example, it’s difficult to create progress bars while they load, or prevent resources from being used until they’re truly needed).

Flutter Web bootstrap API enables developers to control when and how the bulk of the Flutter web app runs, and how the bulk is downloaded.

Where it is used:

• Flutter web apps need to be able to control when they start utilizing computing resources (network, processor).
• Creating a somewhat accurate loading bar.
• Asynchronously loading and running Flutter web apps will increase Lighthouse scores.

🟠 CORS

The first point has nothing to do with Flutter Web directly, but it might be encountered during development. CORS stands for Cross-Origin Resource Sharing and refers to various techniques by which browsers limit and define how resources can be shared between different domains (CSS, JS, Images, Cookies/Authentication, etc.). HTTP headers contain CORS policies (like all headers, they are key-value pairs).

When you want to share resources or get resources from another domain, the code you’re used to might not work anymore (like fetching an image from a website). You might ask yourself why this is important for your Flutter webpage. Whenever you make an HTTP(S) request on your phone, the Flutter code doesn’t care about the CORS header; however, if you run the same code on the Flutter web, it throws an exception.

Your browser checks to make sure websites are adhering to a domain’s CORS setup. This cannot be changed, which is fortunate. If you are in charge of the other server, you must do the following actions:

• Set the appropriate CORS header to enable your usage case.
• You might need to add domains to a white list, depending on the use case.

🟠 Navigation

Flutter has provided a wonderful library for web app navigation which has all the criteria that every developer wants.
Introducing, go_router.

Which is a powerful library and will be used to define URL patterns, navigate using a URL, handle deep links, and several other navigation-related scenarios.

So, before using it directly you need to do a setup in your main.dart

return MaterialApp.router(
title: 'Rayse Client Portal',
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'),
],
theme: CustomTheme.lightTheme,
routerConfig: router,

Once you add the routerconfig as a router you should need to create a Router. dart where the class will return the object as the router.

So in your Router. dart you should need to use the GoRouter method with path or query parameter as per your requirement and that should need to call for navigation.