Create a web app using Flutter (with setup)

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

Photo by Erwan Hesry on Unsplash

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 :).

Developer Android, Flutter