My Experience using Flutter Web & Firebase to Launch a Landing Page

With the introduction of Flutter for the Web, I decided to lean in and build a landing page using Flutter and Firebase.

Flutter Web has been introduced and as I was building my first Flutter app, I decided to lean all in and also use Flutter to deploy a “one-page” (you’ll understand the use of the quotes shortly) landing page for my mobile app. If you have done so or know about releasing a mobile app, you know that both Apple and Google require you to have a place where your privacy policy is stored. Now while there is a range of options for hosting this information a landing page is a great solution.

Flutter Web has been introduced and as I was building my first Flutter app, I decided to lean all in and also use Flutter to deploy a “one-page” (you’ll understand the use of the quotes shortly) landing page for my mobile app. If you have done so or know about releasing a mobile app, you know that both Apple and Google require you to have a place where your privacy policy is stored. Now while there is a range of options for hosting this information a landing page is a great solution.

So I jumped into Android studio and set up my project to run for the web, which was very straightforward (there are a ton of tutorials online about how to do this, I referred to this one by Filled Stacks quite heavily). The disclaimer here is that I am not experienced in web development, shy of knowing some basic CSS and HTML, but by my own admission a far cry from being able to put a website together. This was another main motivation for working with Flutter to build my landing page as I saw it as the easiest way of accomplishing this task. Which for a small independent project of mine seemed fitting.

So after setting up the project, I jumped in and did a bit of wire-framing, and through this exercise realized I likely needed three pages, the main page of the site, a page which hosts the privacy policy, and then a third contact page. So the “one-page” site became three pages but because of how I handled the page transitions it is technically one site where the widget being presented is decided based on which navigation link is selected.

One thing I didn’t get working in time but eventually found a workaround for is how to handle uploading the support messages to my linked Firebase database.

Conclusion

I found implementing a site with Flutter to not be too difficult however, there are some things that I will definitely need to get better at if I want to continue using Flutter for web development, and in no particular order.

• Handling responsive design
• Basic design practices
• URL navigation
• Planning out the widgets in advance as there s a lot of nesting that needs to happen to get the expected results

Some weird quirks I noticed is that while most web pages typically have a scroll bar on the right-hand side, there was no such scroll indicator on my page. Also, the controls were more akin to mobile controls as someone visiting the site would have to click and drag to move the content up and down. Now I am not sure if this is an error with how I implemented my widgets, but it was something I noticed once I had the site hosted.