避坑清单：用WanAndroid-Flutter学习Flutter必碰的7个常见问题与解决方案

避坑清单用WanAndroid-Flutter学习Flutter必碰的7个常见问题与解决方案【免费下载链接】WanAndroid-FlutterFlutter版本 WanAndroid客户端 适合Flutter入门学习 被张鸿洋微信公众号推荐为优质Flutter开源项目啦项目地址: https://gitcode.com/gh_mirrors/wa/WanAndroid-FlutterWanAndroid-Flutter 是一款基于 Flutter 开发的 WanAndroid 客户端功能覆盖文章列表、知识体系、搜索、收藏和 WebView 详情页代码简洁、结构清晰被张鸿洋微信公众号推荐为优质 Flutter 开源项目非常适合新手作为 Flutter 入门学习的第一个实战项目。本文整理了在该项目上手与学习过程中最常踩的 7 个坑并逐一给出解决方案。快速开始一键获取项目并跑起来在开始避坑前先获取代码git clone https://gitcode.com/gh_mirrors/wa/WanAndroid-Flutter flutter pub get flutter run项目整体目录非常友好页面集中在 lib/pages/网络层在 lib/http/数据模型在 lib/model/入口是 lib/main.dart。先跑通项目后面的坑你才会似曾相识。坑 1Dart SDK 版本冲突——pubspec.yaml 的约束拦住了新环境现象用较新的 Flutter 环境执行flutter pub get时报The current Dart SDK version is 3.x.x之类的版本不满足错误。原因项目 pubspec.yaml 中写的是sdk: 2.12.0 3.0.0而新版 Flutter 已捆绑 Dart 3。✅解决把 SDK 约束放宽为sdk: 2.12.0 4.0.0本项目已完成空安全适配兼容 Dart 3 无压力再重新flutter pub get。坑 2依赖包版本过旧导致 pub get 失败现象pub get报版本冲突常见嫌疑人是dio: 4.0.4、webview_flutter: ^2.0.10、shared_preferences: ^2.0.6这些偏旧的固定版本。原因老项目锁定的依赖版本与新 SDK 传递依赖不兼容。✅解决执行flutter pub upgrade逐步升级升级webview_flutter到 v3 时注意 API 有变化如WebView构造方式对照 lib/pages/article_detail_page.dart 调整即可改动量很小。坑 3Android 9 禁止 HTTP 明文请求网页打不开现象真机运行后WebView 里的部分内容或 http 接口请求被拦截页面空白。原因Android 9API 28起默认禁止明文 HTTP 流量。✅解决项目已给出标准做法——在 android/app/src/main/res/xml/network_security_config.xml 中设置cleartextTrafficPermittedtrue并在 AndroidManifest.xml 中引用该配置。学习时可直接照抄这套配置。坑 4WebView 加载网页的 JS 与跳转拦截问题现象文章详情加载异常或页内链接被文章站的乱七八糟的跳转带偏。原因WebView 默认不放开 JS且未拦截非 http(s) 跳转。✅解决参考 lib/pages/article_detail_page.dart打开javascriptMode: JavascriptMode.unrestricted并用navigationDelegate只放行http:/https:开头的跳转。这是 Flutter WebView 插件使用的经典姿势。坑 5底部 Tab 来回切换页面状态复活不了现象首页 → 发现 → 首页列表滚动位置丢失、重复请求数据。原因普通switch写法会销毁再重建页面。✅解决看 lib/pages/home_page.dart用IndexedStack同时挂载三个页面并只切换 index状态自然保留。这是 Flutter 底部导航保持状态的标准方案建议直接掌握。坑 6轮播 Banner 的 TabController 报错或内存泄漏现象运行期报A Ticker was activated. Another ticker is still active或控制台警告未释放资源。原因TabController需要TickerProvider作为 vsync且必须在dispose中释放。✅解决对照 lib/widget/slide_view.dartState 混入SingleTickerProviderStateMixin在initState创建控制器在dispose中调用tabController.dispose()。三步缺一不可Banner 轮播就稳了。坑 7登录 Cookie 丢了收藏功能总提示未登录现象登录后杀进程重启收藏、点赞等需要登录态的功能全部失效。原因服务端用 Cookie 维持会话客户端没有持久化 Cookie。✅解决项目用dio_cookie_managerpath_provider实现了 Cookie 持久化配置见 lib/http/app_dio.dart只要传入cookiesPath就会自动挂载CookieManager。API 地址集中在 lib/http/app_urls.dart接口结构一目了然。总结7 个坑一张表#问题关键文件核心解法1Dart SDK 版本冲突pubspec.yaml放宽 SDK 约束到4.0.02依赖版本过旧pubspec.yamlflutter pub upgrade逐个升级3HTTP 明文被拦截network_security_config.xml开启 cleartextTrafficPermitted4WebView JS/跳转问题article_detail_page.dart放开 JS navigationDelegate 拦截5Tab 切换丢状态home_page.dartIndexedStack保活6Banner 控制器报错slide_view.dartTickerProvider dispose7Cookie 登录态丢失app_dio.dartdio_cookie_manager 持久化项目作者也在 README.md 中列出了下拉刷新统一封装、空数据/错误页统一处理等待解决问题正好是学完这 7 个坑之后可以动手进阶的方向。把这份避坑清单存下来你的 Flutter 入门之路会顺畅很多 【免费下载链接】WanAndroid-FlutterFlutter版本 WanAndroid客户端 适合Flutter入门学习 被张鸿洋微信公众号推荐为优质Flutter开源项目啦项目地址: https://gitcode.com/gh_mirrors/wa/WanAndroid-Flutter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考