navigation

  • The simple use of a Flutter Dialog
  • Flutter Learning chapter 2 — Drawer and Water pattern compression effects
  • The use and Principles of MobX
  • Flutter learning chapter 4 — Size solution
  • Study of Flutter (5) – Route analysis
  • Study of Flutter (6) – The final chapter of Route Analysis

preface

With the release of Flutter1.9, Flutter Web has been incorporated into the main Flutter Repo. This means that from now on, you can build mobile and web applications using the same set of benchmark code, truly entering the full platform era.

architecture

Here are two images:

The architecture diagram of Flutter Web and Flutter is the same. Obviously, the Framework layer is the same, so for the developer, it is the same code. The difference is that the underlying flutter Web transforms the DART code into JS, while the mobile end uses the SKIA engine.

The environment

In fact, technical people who do mobile development will more or less yearn to have their own website, but they are not proficient in Web development and the cost is too high. Instead, they will no longer worry about flutter Web.

Start with the environment configuration:

 flutter channel master
 flutter upgrade
 flutter config --enable-web
 cd <into project directory>
 flutter create .
Copy the code

This process may take some time, depending on the network speed.

Run:

 flutter run -d chrome
Copy the code

packaging

 flutter build web
Copy the code

For details, see Flutter Chinese website.

The packaged product is as follows:

Index.html is the entry point, and the code logic is compiled in main.dart.js.

The deployment of

When the completion of the above operations, it means that we are closer and closer to the personal website, packaging products have been, on the deployment of 🔨. At this time, someone can say, deploy affirmation very troublesome, buy server again, want to match disorderly environment again, you this title party, a few minutes affirmation not line 🤥.

Github Page is a free site for developers to deploy their own websites on. Many well-known bloggers deploy their own blogs on Github Page. In making page deployment projects can be accessed through the form of links: https://username.github.io/project, which is equal to the server and domain name.

I guess there will still be people who will say it’s too weak to automate deployment. 🙆 and I was prepared. Github also has another great tool called Github Actions, which is dedicated to providing continuous integration services. As a result, we can implement an automated deployment process like this:

Submit the project code to Github, trigger Github Actions, execute the flutter build web command, and deploy the generated product to the gh_Pages branch of the project, associated with github page.

So we can just focus on writing our own personal website and leave the rest of the deployment mess to GitHub. Of course, even with all this preparation, starting from zero, a few minutes is not enough to build your own personal website 😵, however, with the demo is different 😏, welcome everyone ⭐.

Personal website

O young tao

reference

  • Flutter official Chinese Website
  • GitHub Actions tutorial