Create a web app using Flutter (with setup)

Photo by Erwan Hesry on Unsplash

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 method to fetchJoke() Inside HomePage class

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store