Complete Guide: Design, Build and Deploy Your First Flutter Website!

Joshua de Guzman
Dec 3, 2019 · 7 min read

Introduction

Flutter is a cross-platform toolkit that allows you to create beautiful and meaningful experiences for your users across multiple platforms.

As of September 11, 2019, if not all, most of the articles I read about Flutter for Web are already outdated. As outlined here, there have been some major changes in the way we do Flutter for Web projects — it’s now included in the Flutter SDK repository. This article is based on the latest release of Flutter in the master channel, and it aims to help you build your first Flutter Website easily.

Disclaimer: While Flutter for Web works with some plugins, smooth animations and transitions, it is still on technical preview as of Flutter 1.9.

Our project

We will be building our very own landing page that you can either use for your business or personal websites. To see the final output, please visit https://flutter.ph.

www.flutter.ph
  1. Drafting ideas using a simple wireframe tool.
  2. Building the website using Flutter for Web.
  3. Deploying the project via Github Pages.

Let’s start with the wireframes

As a design-driven developer myself, I tend to maximize the tools available to transfer my ideas, concepts and user stories into meaningful and presentable wireframes or mockups.

If you’re just about to write your first line of code in Flutter, I’d recommend that you start playing around with some wireframe or mockup tools that allow to arrange layout objects, drag and drop components — this will help you visualize and plan for the overall structure of your app. Currently, popular IDEs such as Android Studio, and VS Code don’t have official support for drag and drop of Flutter widgets — we will write every widget in code!

I will give you the top 3 tools I use for my work and personal projects.

draw.io is a diagramming application that allows users to create and share diagrams within a web browser. Even though it’s meant for creating diagrams, it can be alternatively used as a wireframe and mockup tool.

Me trying to move objects fast… I meant the video speed.

Am I forgetting something? — it’s free and open-source!

Just some random gif from Friends. Who’s watching?

Sketch is a design toolkit that helps you create beautiful mockups and prototypes for your product collaboratively with your team. It has an extensive amount of extensions that you can use to speed up your design process.

www.sketch.com

Framer is an interactive design platform that allows you to create astonishing mockups, and have it previewed on a device emulator.

www.framer.com

In this article, I chose to use draw.io to layout the elements, configure the dimensions, and write down the content I need to see on my website. You can download the file here, and import it on your account — feel free to modify the layout.

The awesome draw.io workspace.

If you still need some help conceptualizing the design of your website, feel free to visit dribbble.com or uplabs.com to get some of those ideas out!

https://dribbble.com/search/landing%20page

Building our Flutter for Web project! 💙

In this article, I used Visual Studio Code for editing the code as we are just only focused on deploying our projects to the web. Flutter works well with various popular IDEs and platforms tools such as Android Studio, Xcode and more!

Visual Studio Code 1.40.2

Since Flutter for Web is on technical preview, let’s use the master channel to get the latest API fixes and updates.

~ flutter channel master
~ flutter upgrade
~ flutter config --enable-web

To double-check if it works, run the following commands:

~ cat ~/.flutter_settings

{
"enable-web": true
}
~ flutter devices

Chrome • chrome • web-javascript • Google Chrome
Web Server • web-server • web-javascript • Flutter Tools

That’s it, we’re good to go!

Just like regular Flutter projects, run the following command to create a Flutter for Web project:

~ flutter create my_landing_page... (more files above)Running "flutter pub get" in my_landing_page...                     8.5s
Wrote 69 files.
[✓] Chrome - develop for the web: is fully installed.All done!

You should now have a similar folder structure just like this:

Flutter project folder hierarchy.

In this article, we will spend most of our time editing the files under the lib directory.

To confirm it’s working, please run:

~ flutter run -d chrome --verbose

And voila…

Starter pack app when after running flutter create.

It looks… boring! But wait, we’re not there yet!

Place your assets under the web directory, and create a folder named assets.

Our asset directory under the web folder.

I downloaded the assets via https://www.flaticon.com/. Here are the assets I used for this project. Feel free to replace them or re-use them in your website.

Declare your assets in the pubspec.yaml file.

www.github.com/joshuadeguzman

From this point forward, every time you create a new build for the project, it will generate an AssetManifest.json under build/web/assets — a file that is responsible for mapping out the assets once your project is hosted in a static site.

Just a random cat trying to hack your website.

1. Create a file named landing_page.dart with a StatelessWidget named LandingPage.

Just like building Flutter for mobile, we will be using the Scaffold widget for us to implement the basic visual layout structure.

www.github.com/joshuadeguzman

2. Change the home property of the MaterialApp to LandingPage().

Widget added in home serves as the initial route or the first screen that will be presented in our app.

www.github.com/joshuadeguzman

3. Place a Stack widget, and add an Image that extends its dimensions depending on the height and width of the browser.

www.github.com/joshuadeguzman

Stack widget allows you to position widgets over one another.

A high-level overview of how we use Stack widget in our project.

4. Complete the landing page elements by adding SelectableText, FlatButton, Padding widgets and more!

Let’s see how widgets are actually used or placed in our app.

www.github.com/joshuadeguzman

Deploying our project 🚀

1. ⚠️ Before you deploy your project on Github, run the project in release mode first via:

~ flutter run -d chrome --verbose --release[ +698 ms] Launching lib/main.dart on Chrome in release mode...
[ +1 ms] Building application for the web...

This is just one of the simplest ways to test whether your assets are loaded correctly.

Hoping you don’t encounter any bug 🤞

2. Build build build! 🔨

~ flutter build webCompiling lib/main.dart for the Web...
Generated files under build/web directory.

3. Host the build files via Github Pages.

Github Pages allows you to host websites directly from your project’s repository. In this project, I added, committed, and pushed the build files to the master branch of github.com/flutter.ph/flutterph.github.io repository.

Github Pages allows you to host one site per account to your very own <username>.github.io URL— in this case, the flutterph organization. In addition to this, you can publish multiple projects under one account or organization. Example: <username>.github.io/<project_name>.

www.github.com/flutterph/flutterph.github.io

To ensure that your website is accessible, head over to the settings page of the repository and see if there’s a message: “Your site is published at …”.

www.github.com/<your_account>/<your_project>/settings

Github Pages will serve your site over HTTPS for FREE! More on this.

BONUS: Setting up a custom domain

Curious why the website is accessible via flutter.ph? — it’s because I used custom domains for our Github Pages!

I have aCNAME file that allows me to tell Github servers to redirect flutterph.github.io to flutter.ph.

www.github.com/flutterph/flutterph.github.io/CNAME

Github has done very informative documentation on how you can start using custom domains for your Github Pages.

Give yourself a high five for successfully deploying your website!

Feeling it?

Conclusion

Despite the fact the Flutter for Web is in technical preview, creating pet projects or playing around with it shouldn’t hurt that much if you’re just trying it out.

What we just did can be deployed right away to Android or iOS, assuming that you have handled platform specific plugin conflicts beforehand after modifying the existing codebase.

I would highly appreciate if we connect on Twitter or Github, and discuss Fluttery things over a cup of coffee ☕.

Resources

Flutter Community

Articles and Stories from the Flutter Community

Joshua de Guzman

Written by

Software Engineer at @freelancer • Founder and Community Lead at @flutterph • Passionate about mobile, cloud and AI • www.jdg.ph

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade