Why I bid adieu to Flutter Web

7 May 2024

The day was March 3 2021, Flutter team announced the stable release of Flutter 2.0.0 and the support for Flutter Web.

I was so excited to try it out and I did. I was amazed by the ease of building UIs with Flutter Web. But as I started building more complex applications, I realized that Flutter Web is not for everyone.

Yes, Flutter web is not gonna replace your web development or comes even close to the performace offered by the latest JS frameworks and it's a good thing.

Yeah, This is my take, Flutter web is not trying to replace JS frameworks but rather it's trying to make the PWA better.

Now before going to metrics comparison, let's talk about the few observations I had.

The development experience with Flutter Web was really good. given that I was already familiar with Flutter, I was able to churn out functional changes really fast, but couldn't say the same about the UI.

Responsiveness and Boilerplate

The major issue I faced was responsiveness. Plus the fact that you cannot portrait lock the webapp on mobile browsers, led to another overhead of making sure the UI is not screwed in landscape mode.

I was able to find few packages which solved the responsiveness issue, but to me it felt clunky.

Look at this code. I have to define autoscale and autoresize based on the breakpoints. I don't really understand why a developer has to worry scale and resize.

MaterialApp(
          builder: (context, child) => ResponsiveWrapper.builder(
            child,
            defaultScale: true,
            breakpoints: const [
              ResponsiveBreakpoint.resize(450, name: MOBILE),
              ResponsiveBreakpoint.autoScale(800, name: TABLET),
              ResponsiveBreakpoint.autoScale(1000, name: TABLET),
              ResponsiveBreakpoint.resize(1200, name: DESKTOP),
              ResponsiveBreakpoint.autoScale(2460, name: "4K"),
            ],
          ),
    ),

Now that I have set up the breakpoints, all my UI components has to adapt itself based on different breakpoints.

Here is one example.

ResponsiveRowColumn(
              // if the breakpoint is smaller than desktop, the component has to in column, if not
              // the layout is row.
              layout: ResponsiveWrapper.of(context).isSmallerThan(DESKTOP) 
                  ? ResponsiveRowColumnType.COLUMN
                  : ResponsiveRowColumnType.ROW,
              rowPadding: EdgeInsets.only(top: constraints.maxHeight * 0.2), // padding for row
              columnPadding: EdgeInsets.only(left: 80, bottom: 20), // padding for column
              rowCrossAxisAlignment: CrossAxisAlignment.center, // cross axis for row
              rowMainAxisAlignment: MainAxisAlignment.center, // main axis from row
              columnCrossAxisAlignment: CrossAxisAlignment.center, // cross axis for column
              columnMainAxisAlignment: MainAxisAlignment.center, // main axis for column
              children: [
                const ResponsiveRowColumnItem(child: NameHero()),
                /// ... Other components.
     ],
),

You see, there's so much boilerplate code for making each component responsive and overtime, this gets messy to maintain.

Performance

The performance of Flutter Web is not bad, but it's not great either. The initial load time is quite high compared to the traditional web apps.

I've noticed, the larger the app, the slower the load time. This is because the entire app is loaded at once, unlike the traditional web apps where the pages are loaded on demand.

This also affects the SEO of the app. Since the entire app is loaded at once, the search engines have a hard time crawling the app. This wasn't a big issue for me, but it might be for others.

Here is the scores from Lighthouse for my previous portfolio built with Flutter Web.

Click to view image in full screen

The First Content Paint (FCP) and Total Blocking Time (TBT) is quite high and the performance score cannot even be calculated.

Considering the all the above points, I decided to move to Next.js for my web development.

Next.js with Tailwind CSS

I want to start by saying that Tailwind CSS is amazing. Just fell in love with it. It's so easy to use and the utility-first approach is just amazing.

The whole idea of this re-write is to make things simple and easy to maintain. Plus the fact that Next.js is SEO friendly and the performance is top-notch, I decided to go with it.

Kept the desing simple and minimalistic with less animations and more focus on the content.

Click to view image in full screen

My thoughts on Flutter Web?

Pros

Cons

If you are planning to build a PWA or a simple web app, Flutter Web is a great choice. But if you are planning to build a large scale web app, I would suggest you to go with the litreally any other JS framework.