10.1.1.flutter-web内网

一:flutter-web部署到内网

(1)canvaskit.js和canvaskit.wasm
(2)KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
(3)css2?family=Noto_Sans+SC
(4)以上四个文件无法下载
(5)通过浏览器开发工具看图：

84e29bf714fa4403893b44372e20fedb.png

二:下载四个文件

(1)canvaskit.js和canvaskit.wasm
下载地址: https://unpkg.com/browse/canvaskit-wasm@0.24.0/bin/
(2)KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
下载地址: https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
(3)css2?family=Noto_Sans+SC
下载地址: https://fonts.googleapis.com/css2?family=Noto+Sans+SC
(4)将以上四个文件放到web/assets/canvaskit/文件夹中

截屏2021-12-16 14.07.25.png

三:本地化加载canvaskit.js和canvaskit.wasm

(1)通过配置flutter run的启动参数(release/debug),然后选择Chrome进行运行

--web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=web/assets/canvaskit/ --release

截屏2021-12-17 10.57.18.png

(2)通过命令行直接运行：(release/debug)

flutter run --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=web/assets/canvaskit/ --release -d chrome

(3)通过浏览其查看canvaskit.js和canvaskit.wasm加载地址：

f997d7659cb348f5bb17fa8c697db735.png

四:本地化加载KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf字体文件

(1)通过搜索build目录下的main.dart.js关键词，能够找到：

image.png

(2)将该加载地址更改为：

web/assets/canvaskit/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf

截屏2021-12-17 09.29.50.png

五:本地化加载css2?family=Noto_Sans+SC

(1)在bubspec.yaml中添加字体路径

截屏2021-12-16 15.13.39.png

(2)设置为默认字体NotoSansSC

import 'package:flutter/material.dart';
import 'package:trunk/widget/home/home_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '易',
      //开发时为true，
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        fontFamily: "NotoSansSC", //全局默认字体
      ),
      home: MyHomePage(),
    );
  }
}

六:打包命令

flutter clean

flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=web/assets/canvaskit/ --release 

七:注意

build/web/目录下得到的main.dart.js你每次编译后都需要执行第四步

参考:
https://blog.csdn.net/qq1377399077/article/details/121565975
https://blog.csdn.net/Bright_TY/article/details/120225419
https://blog.csdn.net/Bright_TY/article/details/120225419