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. 
&nbsp;
&nbsp;

<img src="https://lh5.googleusercontent.com/IxDCWCuLnv9uzzvqqinkS2d9lb38b7hBodEOC6npyANQQBTnr6DWdBiaYIKUWLNsvmGETU-3m60EDoycmSuyyPVD0RS314mBhvCWjtelwgr8gbYjwleVf6zcJHzYs_wOtlOgQTcd" alt="" style="height: ;width: "/>
About Framework Flutter web and flutter app use the same dart framework =&gt; share widgets to build app and web.
Flutter web uses Javascript engine to compile dart to JavaScript.
<h2>Progressive Web Application built with flutter.</h2>
Flutter provides PWAs, settings, offline support, proper UX.
&nbsp;

<img src="https://lh5.googleusercontent.com/PKl1S-ec6u2wg2Y00HapP-JjiWnE7305SmsB7LpsvXlnLgjD2ZcA4aYVwSyW3OkISS3EZ4bJGiVfXAuXxAB_2cAW1O94whNlcYz2EiBoUOWEO6Dcs-b-qwnQHVRz2JBJis1F5wsz" alt="" style="height: ;width: "/>
Detail and chart:<a href="https://web.dev/progressive-web-apps/" target="_self"> <ins>https://web.dev/progressive-web-apps/</ins></a>
<h2>Single Page Application</h2>
Flutter web supports independent web building, with diverse graphics and interactive content to reach users on multiple devices. 
&nbsp;
<h2>Existing mobile applications</h2>
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
<a href="https://www.youtube.com/watch?v=HAstl_NkXl0" target="_self"><ins>https://www.youtube.com/watch?v=HAstl_NkXl0</ins></a> 
&nbsp;
<h1>Upgrade flutter 2.</h1>
To update flutter to 2.0 do the following:
Note: Before upgrading, make sure the source code is buildable
&nbsp;

<img src="https://lh5.googleusercontent.com/EUvv6xkoLfSQ7vT--jm7r2bjEuhh9HvILu1mWibC-_vxKpj9jsLOUQMLuL9mk3nvNbSTlJG4e7I2eJqKCVUMmW0GN1MAqZmzkS_XsRBAp1JKkEHPwKA83WzkDiZe1iR_aeyU6p3P" alt="" style="height: ;width: "/>
After going through step 3, the upgrade interface after selecting the link is as follows:
&nbsp;

<img src="https://lh4.googleusercontent.com/H0krCaXstq19t_M2ToQuFd8kBnJzr22Ug-p9gYXv0CzuNk-rsS68katKvjz70ZQXIhyoWFoC05I32Zkdeh56EdT2jmnoN4iSbXx2K64BxWK_nKVd0M30AcRS93aufQwo0uwgU5eG" alt="" style="height: ;width: "/>
After selecting apply migration ide will run to upgrade to Flutter 2.
<h1>Create basic Flutter</h1>
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. 
&nbsp;
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.
&nbsp;

<img src="https://lh5.googleusercontent.com/hEuN3rNJf2LvvrByLi0oKs6K9nmTy37P0TtUuNlXnFqPmfks61lhXDTi3XEnNjDeKmLHAjW15iF_RVCn1omrmzSKYBaUVqEqv4_0SOE10FWu2cE_lGo-exOSQMptKYHbRF2zRGtb" alt="" style="height: ;width: "/>

<img src="https://lh5.googleusercontent.com/BcBQ7Cz6RuisBT-KyFsNthTQ_StU0NrI5EkXMc-7oJ9P_Q_Ey88kjzy7uXD6ThKLvONbmLeneX84Vqhz1Y3Vj5LB4MBCqqD8aClOpTrr0nNd4TrVDT7q6KUE43hpkKIJg7QnQuFV" alt="" style="height: ;width: "/>
Configuration to run web on visual code:
&nbsp;

<img src="https://lh4.googleusercontent.com/OKyy2B5tdvjPKzB1_tzMhnYRYbPm5ewJflY-nnFZAEbz2NV7qerww3NwJRR_-xUJZpy9A_F197bVLuC12XoTiBc9lWpsoT9IJriZLttYoi4T69rA0-6A6W8GroHVzv4tH1aPXltq" alt="" style="height: ;width: "/>
<h1>Deploy on firebase host:</h1>
- 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:
&nbsp;

<img src="https://lh6.googleusercontent.com/wY3XQ3o9pPnK2ulIX9yoADl_-N__Z95m_7Z1N_g2i5h2YGW2ybqJRyCmvVE7s5V1Q7YABLJmwS_WUUFMfnxSsZHjPrL1JIKEZK5xfWN45HwLVtGtoy940XWFA9b6rHyoqqPn3WBh" alt="" style="height: ;width: "/>
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.
&nbsp;

<img src="https://lh5.googleusercontent.com/ssh8_-yfbX7ZabiTBWYmZUK1i--J2cez9Lp35201IZnG--VrIXvHduhRUBCS-h60XgCTPS_TxZYtwDSSM33uf1duxbAqukOunwgfB2XFB6bNSgLWACDhJKLZTjrtGk_bpWjhzfzl" alt="" style="height: ;width: "/>
để deploy web chọn hosting:

<img src="https://lh5.googleusercontent.com/vbBsYD70d8-wjZFx1318LxgweLwqR0Fv44oNeBnjtRibVW8X5ndklmkSLLBY6TBqvfFDMiE2NgIUt4BHaEVHoiNwdeDVQqDW29gCFcPgm5FeKn5zuHsBevQv-wmeIxOCVoHyV7vh" alt="" style="height: ;width: "/>
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/#/
&nbsp;
&nbsp;

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.

nhi_writter

Deploy web with Flutter 2

Deploy web with Flutter 2 | WATA

<img src="https://lh6.googleusercontent.com/DwysSV4EiEJOKF_DfHsc1XjXTRuDdKbWHTTpwO7StvKdnvyj9uIfhnOQcI2kXSo7149DAyHOaedCog4q6RSTn0RXXh3T39YHgTbBpAYmrNa-Eetov1IylG__zPGtKvnRgFFY8JdD" alt="" style="height: ;width: "/>
Single source of truth: The state of the entire application is stored in a single store which is a tree model Object.
State is read-only: The only way to change the state is to create an action (an object that describes what happens).
Changes are made with pure functions: Use a pure function (Simply calling it a function with no other effects) to get the previous state of the same action, and return the new state.
Flow of an event in redux flutter.
For example: when user presses login button View will receive then Dispatch send an Action, action is sent to Middleware to handle logic + - * : etc… after done middleware send to Reducer, reducer is responsible for updating again Store, store will then get the new results to receive updates for the View.
<h2>Demo redux in flutter:</h2>
Demo creates an application that makes api calls and displays the results on the screen.
Create the project and add the folders , redux -&gt; action, middleware, reducer.
&nbsp;

<img src="https://lh6.googleusercontent.com/34Iuto-NIa-dbsZRA-TqBw3BXdKlnxo6QPEE-wjqWS517eE5niCVCFKEIo5zQyUF8s1dy1XXuVw_FXxCnQvcjBbs3pu4qDPzXmnT5thw2BhhMF6jfvCoZEAqwHnnLKoiTFndUfyS" alt="" style="height: ;width: "/>
&nbsp;
Add library in pubspec.yaml
// support using redux in flutter
redux: "&gt;=4.0.0 &lt;5.0.0"
flutter_redux: "^0.7.0"
Use call api
http: ^0.13.1 
&nbsp;
<h2>AppState</h2>
This class is where the value of app is stored.
&nbsp;

<img src="https://lh4.googleusercontent.com/WabWN8uOXgPU3rSf2WWAQ3AheKoiewYi03abvSCxfFao5o7W3Oag5PsZb5XN9uAwP5dn5hRZpnOI1FFNijcdWvicff46RkPl9GscYzfmjkbJmRVZ4_3r50nKnzArB6HGXNg65LLa" alt="" style="height: ;width: "/>
<h2>Action</h2>
Create classes Increment Button, UpdateQuoteAction. 
&nbsp;
&nbsp;

<img src="https://lh5.googleusercontent.com/F-BOjKUcNphtaFKxtni7xBj7viO_2eY_ukQXi0hajQS7wnXCJx-91X6PxHN4TV4iQ5t7RdezvSzXsjDblB1MCtF7T_89saTHAJygzalY-464NIurByXeTpJTC2y4hhY6Q8Ighq4y" alt="" style="height: ;width: "/>
<h2>MiddleWare</h2>
Create class HomeMiddleWare
&nbsp;

<img src="https://lh5.googleusercontent.com/MVOdAi_-gHpEgPmHUrfXaiggw0i3T1yNrXmz7GvK9YXJYg5X_MAKVyqEHAYnKwmhT3hY70dWWhUe3RZrfHf8Cr3AIo7RBXDF8xeDVMGKd09F1cXtcfNdgmZNjILKV6lvY_iV2FT9" alt="" style="height: ;width: "/>
This class handles the logic of the specific action, in this example handles adding 1 for the counter variable
<h2>Reducer</h2>
Create class appReducer
&nbsp;

<img src="https://lh4.googleusercontent.com/t80DDka1xJWoURoPVJOdR2u072Mi7BJenW5LnMV5eU912EnxBKX2wdgQrdvcWw9HEo2AxmriQxHoPCf_igpsYoeeZxAxJifE7TJJN1PDetBFuMKhNlvx4z5eZv4Kc1bPDT8kNN-U" alt="" style="height: ;width: "/>
The class updates the value of state for app.
<h2>Store</h2>
Create class store 
&nbsp;
&nbsp;

<img src="https://lh3.googleusercontent.com/gA8OrxoKfL-bb493Y-bZPCVYVPDv5jSHtZhVBLMVRpgeiK-35TPI11fRwte3TREt_9HBpuDR0aRv5nlWu4hZQC_u-8TrTjp6Q52AhMCZdec8jOpGoyPC7pBaosDC10hmkJ2eGvA4" alt="" style="height: ;width: "/>
Initialize the store for the app, initialize the reducers and middleware that will run in the app.
Note: thunkMiddleware is a class of the redux_thunk library.
<h2>ViewModel</h2>
&nbsp;

<img src="https://lh5.googleusercontent.com/n-D7dAqSmqapRTFNI58Q5sKhh9cWe4Y3gmfFCcc3pYKGJqpVMuqSOA6AovcohbTyNUten5e9eIeokkIhsrOyHrs19xai6vq5IcOYGmfOS9R8bqqwq13hqIxJG830j8RTBgok-3jO" alt="" style="height: ;width: "/>
&nbsp;
This class holds the values and actions corresponding to the view.
<h2>View</h2>
<h3>StoreProvider</h3>
Redux provides StoreProvider - This widget will wrap the whole app, get the state of the app allowing to create a store at the root app, connect the store and make it available to child widgets via StoreConnector or StoreBuilder.
Flutter runs on the widget tree, which means it will run from the parent root to the end of the widget tree, so it is necessary to initialize the store at the root level of the app to be able to distribute the state to all the widgets inside.
&nbsp;

<img src="https://lh3.googleusercontent.com/aj4_TODwjSIC3dRrOdbT5JYVKs-7cjcmdAQP5Vono8B9m4Wh763pAPK8GUResHL18JOYky_zySHGOQLrK6YwBPVV36tetNdk1UxoZGo67iWkki9Kz-OxeWCVPH0hPRUi-bZIRSJv" alt="" style="height: ;width: "/>
<h3>StoreConnector</h3>
This Storeconnector widget builds on the Store State.
Before the builder function is run, the converter converts the store into a separate and appropriate viewmodel for the widget to be built.
Every time the store changes, the widget will be rebuilt, and the widget can only be rebuilt when the viewmodel changes.
In fact to run correctly inside the viewmodel it is necessary to add the hasCode, [==], and set distinct == true attributes when initializing the Storeconnector.
&nbsp;

<img src="https://lh3.googleusercontent.com/OQHTkcWAd9FIeqen3FQFr4ObewaRNm9vRtHAvsWMnVqh4xd5eEe7TxN-A-Gw9n7w6GHxdUVuv-NCbQOh66fxt47Kc9FW8Ko3I-WPGShH-HKw2YTWj5uTxEVv-Z1NN0-G9iQJ-gAy" alt="" style="height: ;width: "/>
<h2>Redux_thunk</h2>
For cases where the action has to handle asynchronous work in flutter redux is more complicated, in this demo it is necessary to call an API and the application must wait until there is a response from the server, if not using redux_thunk, the code will be more cumbersome.
How redux flutter handles an asynchronous action when not using redux_thunk =&gt;
<a href="https://github.com/fluttercommunity/redux.dart/blob/master/doc/async.md" target="_self"><ins>https://github.com/fluttercommunity/redux.dart/blob/master/doc/async.md</ins></a> 
&nbsp;
Redux thunk flutter provides a solution to do the work asynchronously and wait until the result is returned then dispatch an action to the Store. 
&nbsp;
&nbsp;

<img src="https://lh3.googleusercontent.com/mufH4owUcPkcgoNwsyiydrR6IT4TtVFnq1hanhkWMkMNu_qGjIHZFNagmhK-WkM3nVs_MrUp6mOqlS3YOrzJRsfRLEoRFrNme5h-8dpFQ4YkinMd7iHraC1SNH4k15sRnXQSRp3u" alt="" style="height: ;width: "/>
ThunkAction
Can be used to delay dispatch of an action or dispatch action when a defined condition is met.
Get into Store, can be used to get the last State.
Dispatched ThunkActions will not go through self-defined middleware.
<h2>Flowcode:</h2>
Increment flow: View -&gt; HomeViewModel -&gt; HomeMiddleware -&gt; appReducer.
Call api flow: View -&gt; HomeViewModel -&gt; ThunkAction -&gt; appReducer.
Structure Source: 
<h2>&nbsp;</h2>
&nbsp;

<img src="https://lh5.googleusercontent.com/0li6h-1KjkeT5ekWJwWS4wg4BbHDBOYnW-KWBq-7d8_XK1qj8l52Sjq7eXyYk-On_DDYGCAtjkG8X8DkaVKlybHKyKzCJ-0CRSgGorraZjSRzUab97zHAYs4bcH4yl7tP_Q_l7we" alt="" style="height: ;width: "/>
<h2>Note:</h2>
Because redux is widely used in many languages, the article is written for reference only, there may be many errors, the article only applies to flutter at the most basic level.
Source code:
https://github.com/wata-corp/pr_web

Flutter's web support delivers the same experiences on the web as on mobile. This article helps you have an overview about Flutter web

Flutter web overview

Flutter web overview | WATA

Every second that passes can never be regained, so before doing anything you should have a plan to manage time in the most scientific way, that we can avoid wasting time unnecessarily. However, many people still more worry about how can manage time effectively. Because they do not know how to take advantage and arrange work and life in the most suitable way. So how is an important time and how to have effective time management skills?

<h2>How can set the goal</h2>
Setting goals is the most scientific way of time management. When you have a clear goal, you will know what you need to do to achieve it. Of course, you want to do that, you must have a schedule for how long to complete the goal, then you will master the time and not let it go to waste.

<h2>List out what need to do</h2>
Careful to list out all things and priorities for per task, Do to-do list for the day, week, and month. This will make it easier for you to manage time effectively. You will know what you need to do at what time, so you won’t have to waste time remembering what you need to do today or what to do next after completing your task.

<h2>Priority your work with tool and technique&nbsp;</h2>
Using the Matrix first thing first after you have a list of to-dos, take a moment to double-check which tasks need to be done first, and which ones can be left behind. The important tasks you should mark and do immediately to ensure the work is completed on time, then continue to do the rest.

<h2>Summary of work</h2>
Before the end of a working day, you should summarize the work at the end of the day to see what you have done and have not done, how much time you have spent on those tasks and are really effective. Is the time you spend on those tasks scientific yet, if there’s something unreasonable, find out the reason and fix it next days if can so that the next time will shorten the golden time to spend on the task.

<h2>Discipline and Habit with personal</h2>
To use your time wisely, you must also practice discipline and time-saving habits. you must set your own rules and follow them strictly. You may find it difficult and frustrating at first time, but if you practice slowly and adapt per day, you will get used to it, then everything will be in order and you will certainly find that you have more time for life as well as work, you will end the situation where every day is in a hurry to race with time, and everything is not finish as you want.

<h2>Focus</h2>
Focus is a great way to not waste time. When you’re doing something, focus all your energy and wisdom on your work, that not only brings high work results but also saves you a lot of time. Because when you focus, you will quickly complete the work and have time for other things.

<h2>Make the timeline schedule for work</h2>
To save time, you should set up a schedule timeline for per work such as: Determine the start time, the time for each stage, the end time and the total time to complete the work, then you will have a detailed plan and specific time, not afraid of affecting the work results and not wasting golden time.

<h2>Scientific workplace arrangement</h2>
Organizing your workplace scientifically helps you not to waste time searching for the necessary records and documents when you needed. A cluttered workplace with piles of new – old, important – unimportant documents is not only confusing, but it also takes a lot of time when you need to find a certain type of document. So, arrange your workplace neatly and scientifically, then you will have more time so you don’t have to waste time on useless work.

Many people still more worry about how can manage time effectively. So how is an important time and how to have effective time management skills?

Manage time effectively

MANAGE TIME EFFECTIVELY | WATA

We are a collective of developers, designers, strategists and everything. We bring together in one fantastical environment and grow together