Mobility

Flutter Web App Commands – Cheatsheet

In this post, I will list down some of the key commands (cheatsheet) which can help one build and release web application (app) using Flutter.  

In order for the following commands to work, follow the steps given below:

Flutter Commands for Web

Once flutter is set up and a template project is created, execute the following one-time commands for setting up Flutter web development environment. These commands can be run from anywhere in a terminal.

flutter channel beta
flutter upgrade
flutter config --enable-web

Once the above commands executed, go to the home / root folder of Flutter project and execute the following commands. The details of these commands can be found on this page titled as building web application using flutter.

Run the Flutter Project

flutter run -d chrome

Build the Web Project

flutter build web

Create Release Build

The command given below will populate build/web directory with built files, including an assets directory, which need to be served together. One should note that the minification is handled when one creates a release build.

flutter run --release
# The following command can also be used
flutter build web

The release build will create the following files / assets in build/web project folder. Take these files and put it in web root folder for any web server including Tomcat, Python, Firebase or cloud hosting (AWS, Google, Azure). More details can be found on this page related to deploying flutter app on web

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Add Web Support to an Existing Project

flutter create .

Embed Flutter App in Web Page

Use the following command to embed flutter app in any webpage. URL is the link for flutter web page.

<iframe src="URL"></iframe>
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Retrieval Augmented Generation (RAG) & LLM: Examples

Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…

6 days ago

How to Setup MEAN App with LangChain.js

Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…

2 weeks ago

Build AI Chatbots for SAAS Using LLMs, RAG, Multi-Agent Frameworks

Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…

2 weeks ago

Creating a RAG Application Using LangGraph: Example Code

Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…

3 weeks ago

Building a RAG Application with LangChain: Example Code

The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…

3 weeks ago

Building an OpenAI Chatbot with LangChain

Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…

3 weeks ago