I recently saw that Flutter supports Web development, so today I tried porting a small game I wrote earlier to Flutter_Web.

Let’s put the results up first

Effect:

Gaming experience address: boyan01. Making. IO/flutter – tet…

Github address: github.com/boyan01/flu…

Next comes the migration process

For details, see https://juejin.cn/post/1 how to Set up an environmentCopy the code

Take a look at the directory structure of Flutter Web first

The directory structure of empty items that this FLUTTER generates

It can be seen that compared to the original flutter directory structure, Flutter_web only has a web folder.

1. Copy the Web folder

Of course, web/main.dart is the entry point, so copy the Web folder to the original project first.

2. Pubspec. Yaml modification

Flutter_web Pubspec.yaml also has major changes compared to the original FLUTTER project. Replace the original project’s pubspec.yaml with a new build file anyway

Then rebuild the project.

3. The migration

By the end of step two, the whole project should be red. (As shown below)

Flutter_web does not use the same package as FLUTTER. You need to change all packages named FLUTTER to Flutter_web.

Dart: UI also needs to be replaced with Flutter_web_UI /ui.dart

4. Assets file

Normally, flutter resource files are placed in the project /assets/ directory and imported into the project through the pubspec.yaml configuration.

But web development is different, you need to move the assets folder to /web/.

5. Other areas requiring attention

Be sure to remove dependencies that are not supported by clean Flutter_Web or compilation will be skipped.

Run the project

Command line type webdev serve to build and run

Then use your local browser to open: http://localhost:8080 to see the effect.

Publish projects to git Page

Use github.com/kevmoo/pean…

conclusion

advantages

Write once, run everywhere, cool!!

disadvantages

Flutter_web uses FLUTTER to build web applications, but because the package name of the library is inconsistent with flutter, many files need to be modified during the migration process.

As a result, mobile development and Web development still need to maintain two sets of code (or synchronize between two code bases), which adds a lot of cost. I hope it can be improved in the future.

Finally, attach the github address github.com/boyan01/flu…

If you find it helpful, don’t forget to click star ✨.