Flet Web应用CanvasKit渲染器离线运行问题求助

要让Flet Web应用在CanvasKit渲染器下完全离线运行，核心是把原本从CDN下载的CanvasKit资源和Roboto字体改为本地加载，具体步骤如下：

1. 准备本地资源 #

• CanvasKit资源：通过flet --version查看当前Flet关联的Flutter版本，下载对应版本的canvaskit.js和canvaskit.wasm，新建canvaskit文件夹存放这两个文件。
• Roboto字体：下载常用字重的Roboto字体文件（如Regular、Bold、Italic），放到项目的assets/fonts目录下。

2. 配置Flet应用加载本地字体 #

在代码中注册本地字体，替换默认的在线字体加载逻辑：

import flet as ft

def main(page: ft.Page):
    # 注册本地Roboto字体
    page.fonts = {
        "Roboto": "assets/fonts/Roboto-Regular.ttf",
        "Roboto-Bold": "assets/fonts/Roboto-Bold.ttf",
        "Roboto-Italic": "assets/fonts/Roboto-Italic.ttf"
    }
    # 设置应用默认字体为本地Roboto
    page.theme = ft.Theme(font_family="Roboto")
    
    # 自定义应用逻辑
    page.add(ft.Text("离线运行测试，无外部资源请求"))

if __name__ == "__main__":
    # 指定资源目录，确保字体被正确打包
    ft.app(target=main, assets_dir="assets")

3. 构建离线版Web应用 #

使用Flet构建命令，传递参数指定CanvasKit的本地加载路径：

flet build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/

4. 部署本地资源 #

构建完成后会生成dist目录：

• 将之前准备的canvaskit文件夹复制到dist根目录下；
• 确认dist/assets/fonts目录已包含所有Roboto字体文件（构建时会自动从项目assets目录打包）。

5. 验证离线运行 #

在dist目录下启动本地服务器（如python -m http.server），断开网络后访问应用，确认启动界面正常加载，无外部资源下载请求。

内容的提问来源于stack exchange，提问作者長濱祐晴