Flutter for Web : Building a Portfolio Website

Aditya Gurjar
Nov 16, 2019 · 4 min read

My portfolio website was pending for updates for quite sometime now. Also with Flutter 1.9 web support was also integrated into the main Flutter repository.

So I decided to give it a try. Knowing the fact that its still in Technical Preview, I was expecting some issues and roadblocks but to my surprise everything worked just as well as it did for mobile. Let me walk you through how I did it.

What we’re Building

The portfolio website we’re building will have three tabs: about, blog and projects. It’ll also have a dark mode and links to all the my social media accounts.

Enabling Support for Flutter Web

First switch to master channel, upgrade Flutter, and enable web support.

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

Now run

flutter devices

And you should see chrome in the list of available devices. This means you’re good to go.

(Note: You need to have Chrome installed for live reloading and running your code.)

Creating the Project

Create the project using flutter create . I used my name for my project since it’s a portfolio website. Feel free to use your name instead.

flutter create <your-name>

I don’t need support for Android and iOS so I got rid of them. This is how my project directory structure looks like.

Let’s Get to the Code

First let’s edit the pubspec.yaml and add the assets and fonts for our project.

I won’t be going over the configuration and model classes for the sake of keeping the article concise. The names pretty much explain what they contain but feel free to check the github repo if you wish to check them.

Create the Home Page. Our Home Page will have three tabs and a AppBar (with the toggle for Dark Mode which we’ll add at the end).

The about tab would have the avatar, name, a short bio and links to all social media accounts. We’ll be using Dart HTML Library for opening the links in new tabs.

I’m loading the latest blogs from my medium profile in this tab and showing them in a ListView.

The ApiProvider for the blog tab.

And the Widget for each individual Blog.

The Project Tab would use a ResponsiveWidget and show the projects in a ListView or a GridView based on the screen size.

The Widget for each individual Project.

Hello Darkness!

Now that we have our basic website done. We’ll use InheritedWidget to add a Dark Mode to our app. InheritedWidget helps in propagating information down the Widget Tree of the app. In our case this information will be a boolean for turning Dark Mode On/Off. Check code comments to understand what every line in our ThemeSwitcherWidget does.

Next update your main.dart to wrap your Top-Level Widget with the ThemeSwitcherWidget we just created.

And in your home_page.dart update the AppBar to add the toggle for dark mode.

Generating the Release Build

To generate the release build, run

flutter build web

This should output your release build inside the build/web folder.

You can serve the website to your browser using any http server to see your see your website in action. I recommend using http-server. Or you can host it wherever you want! I have hosted mine at www.adityag.me. Check it out.

Flutter Community

Articles and Stories from the Flutter Community

Aditya Gurjar

Written by

Android. Flutter. Likes traveling.

Flutter Community

Articles and Stories from the Flutter Community

More From Medium

More from Flutter Community

More from Flutter Community

More from Flutter Community

Font Features in Flutter

192

More from Flutter Community

More from Flutter Community

Flutter — Shadows & glows

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