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

If you missed something here is the final code.

sharmadhiraj/chuck_norris_jokes

Thanks for reading.