{"id":24285076,"url":"https://github.com/zacksleo/flutter-web-demo","last_synced_at":"2026-04-10T21:43:51.256Z","repository":{"id":271669949,"uuid":"913811307","full_name":"zacksleo/flutter-web-demo","owner":"zacksleo","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-09T06:30:28.000Z","size":482,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T18:39:14.582Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zacksleo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-08T11:55:27.000Z","updated_at":"2025-01-09T06:30:31.000Z","dependencies_parsed_at":"2025-01-09T07:50:48.679Z","dependency_job_id":null,"html_url":"https://github.com/zacksleo/flutter-web-demo","commit_stats":null,"previous_names":["zacksleo/flutter-web-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zacksleo/flutter-web-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zacksleo%2Fflutter-web-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zacksleo%2Fflutter-web-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zacksleo%2Fflutter-web-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zacksleo%2Fflutter-web-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zacksleo","download_url":"https://codeload.github.com/zacksleo/flutter-web-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zacksleo%2Fflutter-web-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31660628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"ssl_error","status_checked_at":"2026-04-10T17:19:13.364Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-16T06:18:56.801Z","updated_at":"2026-04-10T21:43:51.227Z","avatar_url":"https://github.com/zacksleo.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlutterWeb实战：03-与流行前端框架集成\n\n本项目是《FlutterWeb实战》的一部分\n\n\u003e 前端有非常多的框架、工具、库，这些都要比 Dart Web 成熟、丰富。所以在将 Fluttter 编译成 Web 以后，若能使用现有的前端技术实现 web 端的特殊需求，肯定事半功倍。\n\n## 搭建框架\n\n在开始之前，确保你已经安装好了 node 和 npm\n\n### 使用 create-react-app 初始化项目\n\n首先使用 create-react-app 创建一个前端项目\n\n```bash\nnpx create-react-app flutter_web\n```\n\n这些创建以下文件\n\n```bash\n  .eslintrc.js\n  build/\n  node_modules/\n  package.json\n  public/\n  src/\n  yarn.lock\n```\n\n这是一个标准的前端项目，不过不用担心，我们不会使用任何 react 技术。\n\n## 项目配置\n\n为了能自定义 webpack 打包配置，需要安装一个名为 `react-app-rewired` 的插件，以替换 `react-scripts` 脚本\n\n### 使用 react-app-wired 替换\n\n安装 react-app-wired\n\n```bash\nnpm install -g react-app-rewired\n```\n\n在根目录创建 `config-overrides.js` 文件，增加以下内容\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = function override(config, env) {\n  // Remove the default HtmlWebpackPlugin\n  config.plugins = config.plugins.filter(\n    (plugin) =\u003e !(plugin instanceof HtmlWebpackPlugin)\n  );\n\n  // Add your own HtmlWebpackPlugin instance with your own options\n  config.plugins.push(\n    new HtmlWebpackPlugin({\n      template: 'public/index.html',\n      minify: {\n        removeComments: false,\n        collapseWhitespace: false,\n        removeRedundantAttributes: true,\n        useShortDoctype: true,\n        removeEmptyAttributes: true,\n        removeStyleLinkTypeAttributes: true,\n        keepClosingSlash: true,\n        minifyJS: false,\n        minifyCSS: true,\n        minifyURLs: true,\n      },\n    })\n  );\n\n  return config;\n};\n```\n\n这里面引入一个名为 `html-webpack-plugin` 的插件，配置了需要压缩的内容。\n\n\n替换 package.json 中 scripts 部分\n\n```diff\n  \"scripts\": {\n-   \"start\": \"react-scripts start\",\n+   \"start\": \"react-app-rewired start\",\n-   \"build\": \"react-scripts build\",\n+   \"build\": \"react-app-rewired build\",\n-   \"test\": \"react-scripts test\",\n+   \"test\": \"react-app-rewired test\",\n    \"eject\": \"react-scripts eject\"\n}\n```\n\n## 初始化 Flutter\n\n在当前项目目录下，执行以下命令初始化 Flutter 项目\n\n```bash\nflutter create --platforms web .\n```\n\n这将创建一个 Flutter 项目，并添加了 web 平台支持。\n\n以下目录由 flutter 创建\n\n```\nRecreating project ....\n  pubspec.yaml (created)\n  lib/main.dart (created)\n  web/\n  analysis_options.yaml (created)\n```\n\n## 集成\n\n现在，虽然两个项目共用一个目录，但我们需要修改一些配置，才将 flutter 项目与前端项目集成在一起工作。\n\n\n编辑 package.json 文件中`scripts/build` 处的内容，改为\n\n\"rm -rf build \u0026\u0026 rm -rf web \u0026\u0026 react-app-rewired build \u0026\u0026 mv build web\"，\n\n同时删除不需要的依赖, 增加 `react-app-rewired` 依赖\n\n```diff\n  \"dependencies\": {\n-    \"cra-template\": \"1.2.0\",\n-    \"react\": \"^19.0.0\",\n-    \"react-dom\": \"^19.0.0\",\n      \"react-scripts\": \"5.0.1\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n-      \"react-app\",\n-      \"react-app/jest\"\n    ]\n  },\n+ \"devDependencies\": {\n+   \"react-app-rewired\": \"^2.2.1\"\n+  }\n```\n\n运行 `npm install` 或 `yarn install`, 更新依赖。\n\n这行命令的作用是，构建时先清理当前项目目录 build 和 web 目录，构建完成后将前端构建目录改名为 web，以提供给 flutter 进一步构建使用。\n\n最终，经过一番折腾， `package.json` 文件中的内容如下面所示\n\n```json\n{\n  \"name\": \"flutter_web\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"react-scripts\": \"5.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"react-app-rewired start\",\n    \"build\": \"rm -rf build \u0026\u0026 rm -rf web \u0026\u0026 react-app-rewired build \u0026\u0026 mv build web\",\n    \"test\": \"react-app-rewired test\",\n    \"eject\": \"react-app-rewired eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n    ]\n  },\n    ...\n  \"devDependencies\": {\n    \"react-app-rewired\": \"^2.2.1\"\n  }\n}\n```\n\n接下来我们复制 web 目录并替换掉 public 目录。\n\n```bash\nrm -rf public\ncp -r web public\n```\n\n运行 `npm run build`, 如果能成功生成 web 目录，代表集成成功\n\n## 前端开发\n\n前面的准备工作完成以后，就可以愉快的开发了！\n\n进入 src 目录，这里面就可以编写我们的前端代码了，也可以使用 npm 的任何 js 库。\n\n为了统一维护 js，我们把 flutter web 的初始化代码从 html 中移到这里。\n\n首先清空 src 目录中的文件，然后新建一个 `index.js`, 添加以下内容\n\n```js\nwindow.flutterWebRenderer = \"html\";\nwindow.addEventListener('load', function(ev) {\n  // Download main.dart.js\n  _flutter.loader.loadEntrypoint({\n    entrypointUrl: 'main.dart.js',\n    serviceWorker: {\n      serviceWorkerVersion: serviceWorkerVersion,\n    }\n  }).then(function(engineInitializer) {\n    return engineInitializer.initializeEngine();\n  }).then(function(appRunner) {\n    return appRunner.runApp();\n  });\n});\n```\n\n## 项目构建\n\n```bash\n# 构建前端\nnpm run build\n# 构建Flutter\nflutter clean \u0026\u0026 flutter build web --build-number=$VERSION_CODE --build-name=$TAG --web-renderer html --profile --base-href /webapp/\n```\n\n上述命令中， 和  都是环境变量，需要提前设置好\n\n```bash\nexport VERSION_CODE=1\nexport TAG=1.0.0\n```\n\n这里需要注意的是，如果你不希望通过子目录访问 Flutter web 应用，那么需要将 `base-href` 设置为 `/`，或者移除该选项\n\n```bash\nflutter clean \u0026\u0026 flutter build web --build-number=$VERSION_CODE --build-name=$TAG --web-renderer html --profile\n```\n\n\n## 公众号\n\n\u003e HarmonyOS Flutter 开发\n\n\u003cimg src=\"./qrcode.png\" width=\"300\"\u003e\n\n`关注公众号，加入交流群。`\n\n## 参考资料\n\n- [Create React App](https://github.com/facebook/create-react-app)\n- [React App Wired](https://github.com/timarney/react-app-rewired/blob/master/README_zh.md)\n- [编写你的第一个 Flutter 网页应用](https://docs.flutter.cn/get-started/codelab-web/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzacksleo%2Fflutter-web-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzacksleo%2Fflutter-web-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzacksleo%2Fflutter-web-demo/lists"}