Lazycatlabs
← All posts

Flutter Web Showcase

Nov 16, 2022 2 min read 0 comments 0 reactions
dartflutterweb

Preview

Source Code

Background

Since Flutter 3 release, the Flutter team said they have made 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 a single programming language that covers Mobile and Web applications.

When you should use Flutter Web

. So far, Flutter Web is 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 of Flutter Web. But if you want to create a web just for internal use, like Web Dashboard, Personal Web, or if you have already created a 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 has some libraries to handle it, like: responsive_ui, responsive_framework, responsive_builder, and more.

In my personal website, I handle the responsive layout by creating some UI in different layouts for Mobile, Tablet, and Desktop. And also create a function to handle size in different screen sizes.

dart
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 created a Dockerfile and Docker Compose to deploy my app on my VPS. Maybe in my next article, I will explain more about what I do and some widgets and animations I use on my personal website.

Conclusion

So far, Flutter Web is still not fit for the web, as you need SEO and still have some performance issues. Here I create pros and cons, I hope that will help you to decide before create Web using Flutter.

Pros

  • Using one code base for multiple application ecosystem
  • Fast development if you're already create application using Flutter
  • PWA ready

Cons

  • Not SEO optimized
  • Hard to debug using browser inspect element
  • Take a long time on first load
  • Still tricky to handle responsive in different screen size

If you have any question or want to discuss, you can write your comment. Thanks!

Suggested posts