Flutter Web: Flutter + Firestore web app(or rather, website)

Is Flutter web a good choice for Web Development is the most common question asked online ever since Flutter announced stable web support. After building a Flutter website, I can say that it truly depends on what you want your website to do. If your website depends on SEO traffic, then Flutter web is not ready for you.

I’ve always been intrigued with the idea of developing a functional website with the knowledge of Flutter. While there were a lot of advantages, there were two areas that I was certainly concerned about — responsiveness, since the web app has to run on multiple devices of different sizes and lack of SEO support.

To solve the problem of a responsive web app, I explored and used the responsive_builder package by FilledStacks. The package comes with getValueForScreenType where you pass in the value for mobile, tablet and desktop and then the package does the rest.

fontSize: getValueForScreenType<double>(
    context: context, mobile: 38, tablet: 44,  desktop: 44
),

Yes, it is that simple to tell your program that it should follow the font size 38 when the device type is mobile, 44 when the device type is tablet or desktop.

Among many others, another one of my most used functions is Responsive.isDeviceType. This particular function has a lot going on under the hood.

Responsive.isDesktop(context)
       //when the device is desktop    
     ? Row(            
          children: [
            RowElement2(), 
            SizedBox(width: 20), 
            RowElement1()
          ],
        )
       //when the device is mobile or tablet
     : Column(  
          children: [
            RowElement2(), 
            SizedBox(height: 2), 
            RowElement1()
          ],
        ),
    ),

But it simply checks if the device is desktop or mobile or tablet.

If the device is Desktop, then display children widgets RowElement2() and RowElement1() inside a row with a width of 20 between them. And if the device is Mobile or Tablet, then display children widgets RowElement2() and RowElement1() inside a column with a height of 20 between them.

For better readability, you might want to use it with ternany operator.

Flutter surely has a lot to offer when it comes to responsiveness of web apps. One that I truly enjoy working with is responsive_builder.

I highly recommend using responsive_builder package if you are getting started with Flutter web apps.

The website also has a contact form which I conveniently connected to Firestore from my flutter project. With minimal resources, I now have a complete functional website.

Coming to the SEO part of the web app, there is currently no support for SEO. But with constant updates, it is likely that the Flutter team will add SEO support to the web apps. Hence, if you are looking to build a website with SEO support, then Flutter may not be the right choice(for now).

I built a company portfolio which requires SEO. I now have to explore on how I can manage to overcome the lack of support.

The website is available at https://sstechserv.com/