How To Set Up Flutter For Web Development

Hi there, as you all know flutter for web technical preview is now launched at Google I/O19, we are now able to build web pages with flutter. But to able to build our first flutter web page, we need to set it up dart & pub global first.

Pub’s global option allows you to run Dart scripts from the command line when you are not currently inside a package. After activating a package, you can run scripts from that package’s bin directory. Deactivating a package removes it from your list of globally available packages. More

Prerequisites

So I assume you have flutter installed, if it is not the case read how to setup flutter here. Now we are going to install dart sdk by using apt-get for the sake ok simplicity.

Installation

01: Setup Source

These commands will enable apt update over https (if it is not done before), then it adds google’s signed public key and add dart source list to apt sources list (as you can see it is adding separate dart_stable.list to the list directory, not over writing default list).

sudo apt-get update
sudo apt-get install apt-transport-https
sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
02: Install Dart SDK
sudo apt-get update
sudo apt-get install dart
03: Add Dart to PATH

Yeh i know, you are looking for pub, do the following and you will be able to use other dart binaries too.

echo 'export PATH=$PATH:/usr/lib/dart/bin' >> ~/.bashrc
04: Activate webdev

Webdev is a command-line tool for developing and deploying web applications with Dart. More

To activate it run below code:

pub global activate webdev

It will take some time to resolve dependencies & log their versions to terminal. If you get a warning like below note

Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.

Well now you now know what to do !

05: Add pub to PATH

This is exactly same as we add dart to PATH. So, again we are going to edit .bashrc file & append the export pub to it. Then we will reload bashrc file without closing current terminal.

echo 'export PATH=$PATH:$HOME/.pub-cache/bin' >> ~/.bashrc
source ~/.bashrc

That’s it, We are all set to write our own first flutter web page. cheers !

o EOP o