Flutter 2.0 Web Hello World

install flutter with

https://flutter.dev/docs/get-started/install

C:\> mkdir src

C:\>cd src

C:\src>git clone https://github.com/flutter/flutter.git -b stable

Run flutter doctor

C:\src\flutter>flutter doctor

Then Go to Web Setup

C:\>cd C:\src\flutter

flutter channel stable
flutter upgrade   

( flutter upgrade >> will load Dart interpreter/compiler )

Create Web App with

C:\src>flutter create myapp
C:\src>cd myapp

Run App with

flutter run -d chrome

Output is

To build as web application in production run …

flutter build web

compiler will create main.dart.js in C:\src\myapp\build\web

compiler will create main.dart.js in C:\src\myapp\build\web

Open With VSCode

Open with VS Code

This is HTML File

Call main.dart.js at line 43

This is output from compile ,copy to web server ( eg. apache nginx)

Copy to htdocs of XAMPP

open from google chrom http://localhost/flutter

Can not display page , not found main.dart.js

must change URL path in index.html จากเดิม http://localhost/main.dart.js

เปลี่ยนเป็น http://localhost/flutter/web/main.dart.js

Then system can display Code main.dart.js

and change path in index.html

Save and

Copy folder myapp\build\web to c:\xampp\htdocs\flutter\index.html

copy again

Check page from browser

Found no error in javascript and data OK

Have URL , can run when click button plus

==== Finished , Thanks for reading ======