Create a web app using Flutter (with setup)

2 min readJul 12, 2019

This article provides step by step guide to setup Flutter, setup Flutter web project & create simple Flutter web app.

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

We will install Flutter, install VS Code & required plugins, create a simple Flutter web app which will fetch random developer joke from Chuck Norris Jokes API.

Step 1: Install Flutter

Follow the official guide to install Flutter on your system.

Step 2: Install VS Code & Extensions

Set up an editor by installing VS Code along with Flutter & Dart plugins.

Step 3: Verify Installation

Verify Flutter installation & editor setup by running the command:
flutter doctor

Step 4: Create a Flutter web app

Open Command Palette from View menu of VS Code menu bar or with shortcut Ctrl+Shift+p.
Enter & select Flutter New Web Project
For the first time, a notification popup will appear stating “Stagehand needs to be installed to use this feature.”
Click on Activate Stagehand.
Enter project name eg. chuck_norris_jokes and provide a location for your project.
Now it will take a few time to resolve dependencies. Once resolved you will see notification “Your project is ready.”
Run project from the menu Debug=>Start Debugging or shortcut F5.
For the first time, it will ask for the environment. Select Dart & Flutter.
For the first time, a notification popup will appear stating “webdev needs to be installed to use this feature.”
Click on Activate webdev.
Once webdev is activated, a browser will launch the beautiful Hello World page.

Step 4: Fetch & display joke

First, we will clear lib/main.dart

Add http package to dependencies.
Add method to fetchJoke() Inside HomePage class

This method will fetch joke & return as Future. More on Async Programming.

Now replace the static body with FutureBuilder widget.

FutureBuilder accepts future objects & returns widgets according to its connection state.

Now run the app, you will see a circular progress indicator at the start & then Chuck Norris Developer Joke. Just reload the page for new joke :).

If you missed something here is the final code.

sharmadhiraj/chuck_norris_jokes

Basic Flutter web app. Contribute to sharmadhiraj/chuck_norris_jokes development by creating an account on GitHub.

github.com

Thanks for reading.