Complete Guide: Design, Build and Deploy Your First Flutter Website!
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.
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?
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!
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-webTo 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!
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 lib directory.
To confirm it’s working, please run:
~ flutter run -d chrome --verboseAnd voila…
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 assets.
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.
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.
4. Coding time!
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.
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.
3. Place a Stack widget, and add an Image that extends its dimensions depending on the height and width of the browser.
Stack widget allows you to position widgets over one another.
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.
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...
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>.
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!
I have aCNAME file that allows me to tell Github servers to redirect flutterph.github.io to flutter.ph.
Github has done very informative documentation on how you can start using custom domains for your Github Pages.
That’s it!
Give yourself a high five for successfully deploying your website!
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
Github Repository
- https://github.com/joshuadeguzman/flutterph.github.io
- https://github.com/flutterph/flutterph.github.io
