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.
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:
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.
Basic Flutter web app. Contribute to sharmadhiraj/chuck_norris_jokes development by creating an account on GitHub.
Thanks for reading.