Flutter web was introduced in Flutter 2 stable. Before, when you want to build a website with flutter, you need to switch to "Channel dev"

We can compile an existing source code to run on the web because it's all built on the Flutter framework, and the web is just another device to run the application on.

 

 

About Framework Flutter web and flutter app use the same dart framework => share widgets to build app and web.

Flutter web uses Javascript engine to compile dart to JavaScript.

Progressive Web Application built with flutter.

Flutter provides PWAs, settings, offline support, proper UX.

 

Detail and chart: https://web.dev/progressive-web-apps/

Single Page Application

Flutter web supports independent web building, with diverse graphics and interactive content to reach users on multiple devices.

 

Existing mobile applications

Flutter web provides the ability to build websites from an existing mobile app source.

For example, sources that were built before flutter 2 on the stable channel.

Note that not all HTML features are supported at the moment, see more here

https://www.youtube.com/watch?v=HAstl_NkXl0

 

Upgrade flutter 2.

To update flutter to 2.0 do the following:

Note: Before upgrading, make sure the source code is buildable

 

After going through step 3, the upgrade interface after selecting the link is as follows:

 

After selecting apply migration ide will run to upgrade to Flutter 2.

Create basic Flutter

https://flutterweb-a3d29.web.app/#/

In this tutorial I create a web ui, which can change the interface when the screen size is changed and deploy to firebase host.

The IDE uses visual studio code.

 

ResoinsiveWidget provides current screen state - large, small, medium.

Every time the screen size is changed, flutter will call the build function again to redraw the UI and this class returns what state this screen size is in, thereby displaying the ui corresponding to the state of the screen. Figure.

 

Configuration to run web on visual code:

 

Deploy on firebase host:

- Step 1: Create project on firebase:

- Step 2: Install firebase -tools

Run command on terminal: “ curl -sL https://firebase.tools | bash”

- Step 3: Login firebase: “firebase login”

The following results:

 

Step 4: Navigate to the project directory.

run here “firebase init”.

After running the above command, a menu of functions will appear, use arrow keys to move, spacebar to select and enter to run the selected item.

 

để deploy web chọn hosting:

public directory: select build/web.

Set up automatic builds and deploy with GitHub?

- Step 5: Run the command flutter build web

- Step 6: Run the command “firebase deploy”

lThis command will deploy the web to firebase's host then return the url that firebase deployed to.

Result: https://flutterweb-a3d29.web.app/#/