A new GitHub web blog done myself with the Flutter.
- flutter build web --release
- cd ./build/web
git init git remote add origin git@github.com:shAdow-XJY/shAdow-XJY.github.io.git git add . git commit -m "Init Flutter web project" git push origin master
//// jsdelivr: https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/ //// 饿了么: https://npm.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ //// 饿了么: https://github.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ // tnnd贼ex,换个镜像源,要不就是没有,有的快一点换个浏览器直接就变慢了,换了台电脑也慢,手机也不行。 // 在官方源或者镜像源将wasm下载下来,放在assets,用自己运行的网站项目中保存下来 // 在pub。yaml :【 - assets/canvaskit-wasm@0.33.0/bin/】
- flutter build web --release (html最快,有DNS的canvakit除了第一次启动之后体验也可以)
mirror source
flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://github.elemecdn.com/browse/canvaskit-wasm@0.33.0/bin/ cloud server tomcat flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://119.45.21.152:443/canvaskit/ github path with DNS flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://shadowplusing.website/assets/assets/canvaskit-wasm@0.33.0/bin/ html render flutter build web --web-renderer html --release
- cd ./build/web
- git add .
- git commit -m ""
- git push origin master
1.set http_proxy=127.0.0.1:10809 2.set https_proxy=127.0.0.1:10809
- change or add new file in assets/write/
- run the [file_generator.dart] first in test/file_generator
- necessarily add new assets path in asset/write/ for example [- assets/write/Flutter/] in pubspec.yaml
- igit lfs trackf you wanna test , [stop main.dart] and [start main.dart] ,not try hot reload just by start main.dart
- then you can upgrade the project [project upgrade]
- use the [font_collection.dart] to collect all the font we use in the projection.
- use the [fonttools(python tool)] to generate a new small font pack from the old big one.(old one store in the local/fonts/)
- if the project run normally in local but github page. view the Network without cache (F12 when opening the github page,like check the file request path.)
- for the assets file .md or .txt in Web I choose to generate the Index file in the Android Studio (Function code:test/file_generator.dart) before I build the release web.
- 解决中文路径乱码问题 asset request file name with chinese or other language char. do the best way is to encode the media.file(like .mp4) name before we use it every time. [such as .asset('assets/video/${Uri.encodeComponent(filename)})]
- solve video fullscreen use js.fullscreen.api,listen to the fullScreen state every time change the size.
- run on the web , [F12] to check the [canvaskit.wasm], see the version we need/use in request header URL for example , now my request url is [https://unpkg.com/canvaskit-wasm@0.33.0/bin/canvaskit.wasm] version is 0.33.0
- -look for mirror source of the [canvaskit.wasm], I choose the [jsDelivr][https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/] -then you can add the additional cmd when build or run . -for me , I add these in the Android Studio , [Edit Configurations...]which in the main.dart(near we click the run button) -build web --release [flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.33.0/bin/] -the vesion best as same as the one you run on the local.[local F12 to check]
- in the web/index.html add the CSS preload animation
- using local font pack with fonttools.
- download [canvaskit-wasm@0.33.0/bin] in assets/canvaskit-wasm@0.33.0/bin
- to make it assets file, althogh first it's also slowly, but after this time, it will take a little! a little! time to use the wasm,I think it because I make my site CDN.
- flutter build web --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://shadowplusing.website/assets/assets/canvaskit-wasm@0.33.0/bin/ 结论:(我的域名有为github page添加CDN解析)浏览器第一次下载可能需要十几二十几秒,有时好的时候是十秒内,这只是说第一次的情况,接下来在停用缓存的情况下刷新,重开进入,都是几毫秒的耗时。
- gitee 仓库同步 github仓库,这样[canvaskit-wasm@0.33.0/bin]在GitHub和Gitee都有一个地址,可以尝试使用gitee的地址看看速度怎么样
- use the local assets fonts in assets if the fonts download online too long
- sidebarx
- url_launcher: ^6.1.0
- clock_loader //remove already
- assets_audio_player
- flutter_markdown
- CSS stair loader animation
- video_player: ^2.4.0
- js: ^0.6.3
- auto_size_text: ^3.0.0
- webviewx: ^0.2.1
- responsive_builder: ^0.4.2
- vertical_card_pager: ^1.5.0
- how deploy on github
- git using github and gitee together
- listen the loading of image //remove already
- MouseRegion
- SlideTransition
- local music
- dart:io use
- flutter web run slowly
- 0xColor and #Color
- request path show encode result
- path encode
- video player
- flutter use js function
- Flutter GridView
- fonttools
- web list mouse drag control
- flutter web build --web-render
- [dio: ^4.0.6](it's useful without doubt.)
- [shelf_proxy: ^1.0.1](use to solve some cors ,but you konw, company protects greatly)
- flutterApp 初始化前执行函数