Create a web app using Flutter (with setup)

Photo by Erwan Hesry on Unsplash

Step 1: Install Flutter

Step 2: Install VS Code & Extensions

Step 3: Verify Installation

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
  • Now replace the static body with FutureBuilder widget.

--

--

--

Developer Android, Flutter

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

K8S Admission Controller

Bitcoin, Supersonic Flight and Christmas Lights

from Buffer

Week 7

How to Generate Unique BST using Recursion?

Real-time data monitoring with Grafana

Design pattern to achieve Datasources abstraction!!

How To Store Images For My App: Amazon S3

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
Dhiraj Sharma

Dhiraj Sharma

Developer Android, Flutter

More from Medium

Social Authentication on Flutter with Appwrite

Flutter Auth Flow | Firebase_auth mail auth

Flutter — Tests

Flutter — Persisting data locally using sembast.