Getting started with Flutter Web

Welcome back to another brand new article on Flutter development. Did you notice one thing in my previous sentence? I wrote “Flutter development” not “Flutter mobile app development”. This io19 Google officially added one more platform to the world of Flutter app development i.e the “WEB”. Now you can use your existing Flutter knowledge to build web apps. You can check this official link for further technical details.

Purpose

The purpose of writing this article is to get the flutter web packages installed and configured on your mac so that you can right away start building some amazing web apps using the Flutter SDK. So without any further delay let’s begin the show.

Install Flutter or Upgrade

If you have not installed Flutter on your mac then follow this official link for the complete setup. If you have already installed the Flutter SDK then just upgrade it to the latest version i.e 1.5 by running the following command on your terminal:

$ flutter upgrade

Install HomeBrew

To install any packages related to Dart or Flutter we need homebrew package manager installed on our mac. Just copy paste the below command in your terminal and hit enter:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Dart SDK

After the installation is complete you are ready to install the Dart SDK. This is a really important step. You must be thinking that “I was developing Flutter apps earlier so the Dart SDK is already configured so let’s skip this step”. Don’t skip. Just follow the below steps and everything will go in a happy path:

$ brew tap dart-lang/dart
$ brew install dart

After the installation is done. Check the version of your Dart SDK by executing this command in the terminal:

$ brew info dart

Your dev version should be 2.3.0-dev.0.5 . Flutter web supports this version of Dart SDK not below this.

To activate the dev version of the the Dart SDK execute below command:

$ brew unlink dart
$ brew install dart --devel

Install IntelliJ IDE

I tried using Android Studio but I didn’t get the option to create a Dart project. So I installed the IntelliJ IDE which is working perfectly. I have linked the official site from where you can download the community edition and install on your mac.

Install the Dart Plugin

Open the IDE and head over to the Plugin section to install the plugin. Refer the screenshot to find the Plugin option:

Now search the keyword Dart and install the first plugin. Refer screenshot below:

Restart your IDE and click on “Create New Project” and select the below option as shown in the screenshot and click Next:

Give a name to your project and hit Finish. After sometime you can see the below layout:

Great! you just created your first flutter web project. Wait! You are not done yet. There are few important steps that needs to be completed. Open the IDE’s terminal and execute below command(screenshot for reference):

flutter packages pub global activate webdev

Once the command execution has been completed at the bottom you will find this little warning. Copy the export PATH=”... We need to fix this:

Open up your mac terminal and execute the below command:

nano ~/.bash_profile

Now you will be presented with the below editor. Paste the command which you copied in the previous step from your IDE’s terminal(Check the screenshot for reference):

Now hit ^ + X and then hit Y and at last hit Enter . Now we need to refresh the path we have set. So copy paste below command on the mac’s terminal(refer below screenshot):

source ~/.bash_profile

Now go back to your IDE’s terminal and execute below command again:

flutter packages pub global activate webdev

This time you should not be getting the previous warning. This time everything should be setup. Congrats! 👏 👏

Run your project

Now the last command to execute to run your project and see the amazing result on your web browser(refer below screenshot):

webdev serve

Woow!! It’s on the web. Check this:

If you check back the source code for this page. It will be exactly the same as you are used to creating Flutter mobile apps:

You can read more about the commands which we executed above or flutter web by going to the official repo. I will explore more about this package and will come up with some amazing articles on my findings. Stay tuned! 😃

If you faced any issue or need a help do connect with me at LinkedIn or Twitter. I will be happy to help you. If you liked this quick walkthrough then do hit those 50 claps 😄 👏 👏.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.