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/

Flutter enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Developer tools for personalization

Legal Departments, it’s time to think the unthinkable — goodbye Excel

Understand The Memory-Factor — A Quick Workshop To Faster Development.

Object-oriented Programming in Python — Chapter 2. The “Composite” Pattern

Windows 10 RTM Education ⋆ Life Time Warranty

10 Best Servlet and JSP Online Courses for Java Developers in 2021

Centralized Logging with ELK, Kafka and Kubernetes

Deploying Rails Backend with Heroku

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samia Ashraf

Samia Ashraf

Flutter enthusiast

More from Medium

Add loading indicator toFlutter Web

What is Flutter?

Gradient Text Flutter

Flutter — Firebase authentication using email_id and password | Flutter web tutorials |…