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 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/flutter-x-10/raw/index.md(查看排版版本)