如何优雅的将项目中的代码，亦或是你的demo代码展示到界面上？本文对使用简单、便于维护且通用的解决方案，进行相关的对比和探究
(相关资料图)
为了节省大家的时间，把最终解决方案的相关接入和用法写在前面
预览代码快速开始接入：pub，githubdependencies: code_preview: ^0.1.5className具体可以参考下面Flutter Web中的问题模块的说明import "package:code_preview/code_preview.dart";import "package:flutter/material.dart";class Test extends StatelessWidget { const Test({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const CodePreview(className: "Test"); }}因为原理是遍历资源文件，所以必须将需要展示的代码文件或者其文件夹路径，定义在assets下，这步操作，为大家提供了一个自动化的插件解决
强烈建议需要展示到界面的代码，都放在统一的文件夹里管理
展示界面的代码需要在pugspec.yaml中的assets定义如果代码预览的文件夹，分级复杂，每次都需要定义路径实在麻烦
提供一个插件：Flutter Code Helper
安装：Plugins中搜索Flutter Code Helperpugspec.yaml中定义下需要自动生成文件夹的路径，文件夹随便套娃，会自动帮你递归在assets下生成不需要自动生成，可：不写该配置，或者配置空数组（auto_folder: []）code_helper: auto_folder: [ "assets/", "lib/widgets/" ]说明下：上面的插件是基于RayC的FlutterAssetsGenerator插件项目改的
看了下RayC的插件代码和相关功能，和我预想的上面功能实现有一定出入，改动起来变动较大想试下插件项目的各种新配置，直接拉到最新后期如果想到需要什么功能，方便随时添加所以没向其插件里面提pr，就单独新开了个插件项目
高级使用主题
提供俩种代码样式主题
日间模式CodePreview.config = CodePreviewConfig(codeTheme: CodeTheme.light);CodePreview.config = CodePreviewConfig(codeTheme: CodeTheme.dark);你可以使用如下的格式，在类上添加注释key的前面必须加注释解析
@，举例（@title，@xxx）key与value的之间，必须使用分号分割，举例（@xxx: xxx）value如果需要换行，换行的文案前必须加中划线/// @title:/// - test title one/// - test title two/// @content: test content/// @description: test descriptionclass OneWidget extends StatelessWidget { const OneWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Placeholder(); }}customBuilder的回调获取param参数，param中拥有parseParam参数获取取得上面注释的数据：param.parseParam["title"]或者param.parseParam["***"]获取的value的类型是ListcustomBuilder的用法codeWidget内置的代码预览布局，如果你想定义自己预览代码的布局，那就可以不使用codeWidget一般来说，可以根据注释获取的数据，结合codeWidget嵌套来自定义符合要求的布局param中含有多个有用内容，可自行查看import "package:code_preview/code_preview.dart";import "package:flutter/material.dart";class Test extends StatelessWidget { const Test({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return CodePreview( className: "OneWidget", customBuilder: (Widget codeWidget, CustomParam? param) { debugPrint(param?.parseParam["title"].toString()); debugPrint(param?.parseParam["content"].toString()); debugPrint(param?.parseParam["description"].toString()); return codeWidget; }, ); }}CodePreview.config = CodePreviewConfig(removeParseComment: false);FlutterUnit项目也是自带代码预览方案，这套方案是比较特殊方案
大概看了下，整个FlutterUnit的数据都是基于flutter.db，该文件里面就有相关demo的文本信息所有的demo也是单独存在一个叫widgets的项目中所以大概可以猜测出应该会有个db的辅助工具，会去扫描widgets的项目中的demo代码将他们的文本信息都扫描出来，然后解析上面的注释等相关信息，分类存储到数据库中，最后生成db文件映射表，宿主可以通过db中的组件类名，从这里拿到demo效果实例总结
整套流程看下来，实现起来的工作量还是有点大的
db辅助工具的编写文本注释相关解析规则如何便捷的维护db文件（辅助工具是否支持，生成后自动覆盖宿主db文件）不同平台db文件的读取和相关适配优点
因为扫描工具不依赖Flutter相关库，预览方案可以快速的移植到其它编程语言（compose，SwiftUI等）具备高度自定义，因为是完全独立的第三方扫描工具，可以随性所欲的定制化缺点
最明显的缺点，应该就是稍微改下demo代码，就需要三方工具重新生成db文件（如果三方工具实现的是cli工具，可以将扫描生成命令和push等命令集成一起，应该可以比较好的避免该问题）build_runner方案https://pub.dev/packages/build_runnerbuild_runner是个强大代码自动生成工具，根据ast语法树+自定义注解信息，可以生成很多强大的附属代码信息，例如json_serializable等库
所以，也能利用这点自定义类注解，获取到对应的整个类的代码信息，在对应附属的xx.g.dart文件中，将获取的代码内容转换成字符串，然后直接将xx.g.dart文件的代码字符串信息，展示到界面就行了
优点
可以通过生成命令，全自动的生成代码，甚至将整个预览demo的映射表都可以自动配置完成可以规范的通过注解配置多个参数缺点
因为build_runner需要解析整个ast语法树，一旦项目很大之后，解析生成的时间会非常非常的长！因为现在很多的这类库都是依赖build_runner，所以跑自动生成命令，会导致巨多xx.g.dart文件被改动，极大的增加cr工作量资源文件方案这应该最常用的一种方案
在pubspec.yaml中的assets中定义下我们代码文件路径flutter: assets: - lib/widgets/show/final code = await rootBundle.loadString("lib/widgets/show/custome_dialog_animation.dart");优点
侵入性非常低，不会像build_runnner方案那样影响到其它模块便于维护，如果demo预览代码被改变了，打包的时候，资源文件也会生成对应改变后的代码文件缺点
使用麻烦，使用的时候需要传入具体的文件路径，才能找到想要的代码资源文件需要反复的在pubspec.yaml中的assets里面定义文件路径资源文件方案优化上面的三种方案各有优缺点，明确当前的诉求
目前是想写个简单的，通用的，仅在Flutter中实现代码预览方案
要求使用简单，高效
维护简单，多人开发的时候不会有很大成本
FlutterUnit方案：实现起来成本较大，且多人开发对单个db文件的维护很可能会有点问题，例如：更新代码的时候，db文件忘记更新
build_runner方案：生成时间是个问题，还有很对其他类型xx.g.dart文件产生影响也比较麻烦
资源文件方案：整体是符合预期的，但是使用时候，需要传入路径和pubspec.yaml中反复定义文件路径，这是俩个很大痛点
结合实现成本和诉求，选择资源文件方案，下面对其痛点进行优化
Flutter的编译产物中，有个相当有用的文件：AssetManifest.json
AssetManifest.json文件里面，有所有的资源文件的路径，然后就简单了，我们只需要读取该文件内容
final manifestContent = await rootBundle.loadString("AssetManifest.json");获取到所有的路径之后，再结合传入的类名，读取所有路径的文件内容，然后和传入的类名做正则匹配就行了
稍微优化
将传入的类名，转换为下划线名称和所有路径名称做匹配，如果能匹配上，再进行内容匹配，匹配成功后就返回该文件的代码内容如果上述匹配失败，就进行兜底的全量匹配优化前
import "package:code_preview/code_preview.dart";import "package:flutter/material.dart";class Test extends StatelessWidget { const Test({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const CodePreview(path: "lib/widgets/show/custome_dialog_animation.dart"); }}优化后
import "package:code_preview/code_preview.dart";import "package:flutter/material.dart";class Test extends StatelessWidget { const Test({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const CodePreview(className: "CustomDialogAnimation"); }}本来是想在pubspec.yaml的assets里面直接写通配符定义全路径，然后悲剧了，它不支持这种写法
flutter: assets: - lib/widgets/**/*.dartGG，只能想其他办法了，想了很多方法都不行，只能从外部入手，用idea插件的形式，实现自动化扫描生成路径
安装：Plugins中搜索Flutter Code Helperpugspec.yaml中定义下需要自动生成文件夹的目录，文件夹随便套娃，会自动帮你递归在assets下生成不需要自动生成，可：不写该配置，或者配置空数组（auto_folder: []）code_helper: auto_folder: [ "assets/", "lib/widgets/" ]flutter web的release模式中
dart2js 会压缩 JS，这样会使得类型名被改变例如：dart中的TestWidgetFunction类的runtimeType，可能会变成minified:Ah，而不是TestWidgetFunction！为啥需要压缩呢？压缩名称可以使得编译器将 JavaScript体积缩小 3 倍+；精确等效语义和性能/代码大小之间的权衡，Dart明显是选择了后者
这种情况只会在Flutter Web的release模式下发生，其他平台和Flutter web的Debug | Profile模式都不会有这种问题；所以说Xxx.runtimeType.toString，并不一定会得到预期内的数据。。。
具体讨论可参考
https://github.com/dart-lang/sdk/issues/35052https://github.com/flutter/flutter/issues/78041解决思路
将压缩类型minified:Ah恢复成 Test将获取的Test字符串使用相同算法压缩成minified:Ah如有知道如何实现的，务必告诉鄙人
下面从压缩级别调整的角度，探究是否可解决该问题
dart2js压缩说明注：flutter build web默认的是O4优化级别
O0: 禁用许多优化。O1: 启用默认优化(仅是dart2js该命令的默认级别)O2: 在O1优化基础上,尊重语言语义且对所有程序安全的其他优化（例如缩小）备注：使用-O2,使用开发JavaScript编译器编译时,类型的字符串表示不再与Dart VM中的字符串表示相同O3: 在O2优化基础上,并省略隐式类型检查。注意：省略类型检查可能会导致应用程序因类型错误而崩溃O4: 在O3优化基础上,启用更积极的优化注意：O4优化容易受到输入数据变化的影响,在依赖O4之前,需测试用户输入中的边缘情况下面是flutter新建项目，未做任何改动，不同压缩级别的js产物体积
# main.dart.js: 7.379MBflutter build web --dart2js-optimization O0 # main.dart.js: 5.073MBflutter build web --dart2js-optimization O1# main.dart.js: 1.776MBflutter build web --dart2js-optimization O2# main.dart.js: 1.716MBflutter build web --dart2js-optimization O3# main.dart.js: 1.687MBflutter build web --dart2js-optimization O4CodePreview(code: Test());但是
综上可知，使用flutter build web --dart2js-optimization O1编译的flutter web release产物，能够使得runtimeType的语义和Dart VM中字符串保持一致
但是该压缩级别下的，js体积过于夸张，务必会对加载速度产生极大影响，可想而知，在复杂项目中的体积增涨肯定更加离谱
对于想要用法更加简单，使用低级别压缩命令打包的想法需要舍弃
用法不得已做妥协CodePreview(className: "Test");这是个让我非常纠结的思路历程
最后到这里也结束了，自我感觉，对大家应该能有一些帮助
一般来说，大部分团队，都会有个自己的内部组件库，因为Flutter强大的跨平台特性，所以就能很轻松的发布到web平台，可以方便的体验各种组件的效果，结合文章中的代码预览方案，就可以更加快速的上手各种组件用法了~
好了，下次再见了，靓仔们！
标签：
