Preview

Source Code

Background

Since Flutter 3 release, Flutter team said they some web-related improvements. They showed some performance test that presumably increases Flutter's performance on the web by using the latest standards regarding image decoding. And some clients also want to use single programming language that cover Mobile and Web Application.

When you should use Flutter Web

So far Flutter Web still not SEO friendly, so if you want to make a Website with CEO friendly I would recommend to you to using Next.js or Nuxt.js instead using Flutter Web. But if you want to create a web just for internal use like Web Dashboard, Personal Web or if you already create Mobile Application and want to make it PWA.

Impression

From my background as a Mobile Developer, that should be more interesting if you want to try to convert your Mobile Application or Create a new Web Application especially to handle responsive, because you need to handle 3 different layouts (Desktop, Tablet, Mobile) and make your code cleaner. Flutter's have some library to handle it, like: responsive_ui, responsive_framework, responsive_builder, and more.

In my personal web, I handle the responsive layout with create some UI in different layout for Mobile, Tablet and Desktop. And also create a function to handle size in the different screen size.

double responsiveSize(
	BuildContext context,
	double mobile,
	double desktop, {
	double? tablet,
}) {
 if (Responsive.isDesktop(context)) {
	 return desktop;
 } else if (Responsive.isTablet(context)) {
	 return tablet ?? mobile;
 } else {
	return mobile;
 }
}

I also create Dockerfile and Docker Compose to deploy my app in my VPS. Maybe in my next article I will explain more about what I do and some Widget and Animation I use in my personal web.

Conclusion

So far, Flutter Web still not fit for Web which you need SEO and still have some performance issues. Here I create pros and cons, I hope that will help you to make decision before create Web using Flutter.