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 config --enable-web
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.
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.
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
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.
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
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
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
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…
Have any questions? Reach out to me on Twitter.
Aditya Gurjar 💙
The latest Tweets from Aditya Gurjar 💙 (@adityadroid). Android Developer @savaaricars. Full Stack Android Developer…
Read My 60 Days of Flutter Series
60 Days Of Flutter: Building a Messenger from Scratch
In this series I’ll be building Messio, A messenger app from scratch using Flutter and writing a daily blog post about…