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.
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.
Technical Outline 👣
- Drafting ideas using a simple wireframe tool.
- Building the website using Flutter for Web.
- 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.
1. draw.io (Free!)
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.
Am I forgetting something? — it’s free and open-source!
2. Sketch ($99 / year)
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.
3. Framer ($144 / year)
Framer is an interactive design platform that allows you to create astonishing mockups, and have it previewed on a device emulator.
With the options above, I chose…
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.
Need a little help with the design?
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!
1. Enable Flutter for Web support
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
}~ flutter devices
That’s it, we’re good to go!
2. Start a Flutter for Web Project
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:
In this article, we will spend most of our time editing the files under the
To confirm it’s working, please run:
~ flutter run -d chrome --verbose
It looks… boring! But wait, we’re not there yet!
3. Prepare assets
Place your assets under the
web directory, and create a folder named
Declare your assets in the
From this point forward, every time you create a new build for the project, it will generate an
build/web/assets — a file that is responsible for mapping out the assets once your project is hosted in a static site.
4. Coding time!
1. Create a file named
landing_page.dart with a
Just like building Flutter for mobile, we will be using the
Scaffold widget for us to implement the basic visual layout structure.
2. Change the
home property of the
Widget added in
home serves as the initial route or the first screen that will be presented in our app.
3. Place a
Stack widget, and add an
Image that extends its dimensions depending on the
width of the browser.
Stack widget allows you to position widgets over one another.
4. Complete the landing page elements by adding
Padding widgets and more!
Let’s see how widgets are actually used or placed in our app.
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.
2. Build build build! 🔨
~ flutter build webCompiling lib/main.dart for the Web...
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:
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 …”.
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!
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!
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.