Flutter for Web : Building a Portfolio Website
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-webNow run
flutter devicesAnd 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.
Configuration and Models
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.
Home Page
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
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.
The Blog Tab
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 Projects Tab
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 webThis 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.
Checkout the complete code at
Have any questions? Reach out to me on Twitter.
