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:
- Install Flutter: Make sure you have installed Flutter. Follow the steps in this page for setting up / installing flutter.
- Create Flutter Project: Once installed, create a template project for getting started with a project. Use this page for creating a flutter project.
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>
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
- Anxiety Disorder Detection & Machine Learning Techniques - October 4, 2024
I found it very helpful. However the differences are not too understandable for me