Recently seen Flutter support web development, so before attempting to write a small game ported to flutter_web today.
First achievement impress him
Renderings:
Gaming experience Address: boyan01.github.io/flutter-tet...
github Address: github.com/boyan01/flu...
Next is the process of migration
可以参考 https://juejin.im/post/5ce515fb518825642c3f42dd 如何搭建环境
复制代码Take a look at flutter web directory structure
The directory structure of this flutter generated an empty project
Observation can be found, relative to the original directory structure flutter, flutter_web more than just a web folder.
1. Copy the Web Folders
No doubt, web / main.dart is the entrance, so the first web folder to the original project.
2. pubspec.yaml modification
Compared with the original flutter project, flutter_web pubspec.yaml also have a greater change. Guannameduo, replace the original project with a new build file pubspec.yaml
Then rebuild it projects.
3. Migration
After the completion of the second step, the entire project should be all the gains across the board. (As shown below)
No way, not with a package flutter_web and flutter use. All packages need to be called flutter all changed flutter_web.
Further, dart: ui need to replace flutter_web_ui / ui.dart
4. assets Resource File
Under normal circumstances, flutter resource files are placed in 项目/assets/the directory, and then pubspec.yamlintroduced to the project configuration.
However, different web development, we need to move assets folder / web / down.
5. Other areas requiring attention
Remember to remove and clean flutter_web does not support dependency, or the compiler will be skipped.
Running the Project
Enter the command line webdev serveto build and run
After opening with a local browser: HTTP: // localhost: 8080 you can see the effects.
Publish the project to git page
Recommended github.com/kevmoo/pean...
Epilogue
advantage
Write once, cool! ! !
Shortcoming
Although flutter_web also use flutter building web applications, but due to inconsistencies in the package name and flutter library, resulting in the migration process need to modify many files.
Thus, the development of such mobile and web developers still need to maintain two sets of code (or the need to synchronize the two code libraries), so inviting a lot of cost. I hope we can improve it.
Finally, attach github address github.com/boyan01/flu...
If you feel that there is help, do not forget to point stars star ✨ oh.