Flutter

Flutter应用全流程开发调试助手

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:Flutter。
它的用途是:Flutter应用全流程开发调试助手
完整的 Skill 内容见:https://321skill.com/skills/flutter-x-10/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

'我的Flutter应用在调试模式下运行正常,但构建release APK后崩溃,请帮我排查',它会检查混淆配置(如proguard规则)、平台通道实现是否遗漏、是否使用了debug-only的依赖,并建议在release模式下运行flutter analyze或添加--no-shrink标志。

介绍

该技能专为解决Flutter开发中的常见痛点而设计,涵盖从widget布局、状态管理、导航路由到性能优化、商店发布的全链路问题。当你遇到RenderFlex溢出、viewport无界高度、RenderBox未布局等布局约束错误,或setState在build中调用、BuildContext跨异步间隙使用等状态管理陷阱,以及UI卡顿、滚动顿挫、热重载失效、Provider/Riverpod/Bloc重建异常、平台通道MissingPluginException、本地化/右到左适配、测试挂起失败、debug构建正常但release版本异常等问题时,它能提供精准的诊断和修复方案。

使用方式灵活:你可以直接描述问题(如“键盘遮挡表单字段”或“列表滚动卡顿”),它会结合Flutter框架原理给出代码示例、配置调整建议或重构方案;也可以要求它审查代码、优化性能、添加测试或处理发布配置。它会自动识别你提到的错误信息(如“RenderFlex overflowed”),并给出有上下文的操作步骤。

适用人群:Flutter前端开发者、全栈工程师、测试工程师,以及需要快速排查Flutter问题的移动端开发者。尤其适合那些刚接触Flutter、对常见错误不熟悉,或希望提升代码质量和发布效率的团队。

使用建议:建议在报错时先提供完整的错误堆栈或相关代码片段,以便更精准地定位;同时注意技能本身不包含对React Native或纯原生Swift/Kotlin的支持,跨平台场景需明确区分。对于复杂的状态管理重构(如从Provider切换至Riverpod),建议先描述现有架构,再逐步调整。

核心特点

与通用Flutter技能不同,本技能重点覆盖了布局约束错误(如RenderFlex溢出)、setState异步调用陷阱、热重载失效、release构建异常等高频痛点,而非仅提供基础语法或组件示例。

注意事项

不适用于React Native或纯原生Swift/Kotlin开发场景。

常见问题

如何修复RenderFlex溢出?

通常需要检查父widget是否给了无界约束,考虑使用Expanded、Flexible或ConstrainedBox限制子组件大小,或者改用SingleChildScrollView。

setState在build中调用怎么办?

避免在build方法中直接调用setState,改用initState、didChangeDependencies或通过回调触发。若无法避免,可考虑使用ValueNotifier或StreamBuilder。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/flutter-x-10/raw/index.md 读取 Flutter 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。