Flutter入门：从零开始构建跨平台应用

上周五晚上，我又一次坐在上海出租屋的小书桌前，耳机里放着 Lo-fi Beats，盯着屏幕上刚跑起来的 Flutter Demo 发呆。说实话，这几个月辞职在家“摸鱼”思考人生的时候，我一度怀疑自己是不是已经和工业界脱节了——毕竟上一份大厂工作天天被 deadline 赶着跑，连喝口水都要掐表，哪有时间静下心学新东西。

但最近刷 GitHub 和掘金时，发现 Flutter 的热度一直没降，甚至不少创业公司直接拿它当主力框架。想起去年双11期间，我们组还在为 iOS 和 Android 两端 UI 不一致吵得不可开交，产品经理拿着设计稿在群里@我和安卓老王：“你们能不能对齐一下？用户都投诉了！” 那时候我就在想：要是有个一套代码多端跑的方案该多好。

于是，我决定亲自下场，用 Flutter 从零搭一个轻量级资源聚合 App —— 主要展示一些开源项目、技术文档，顺便集成一个“区块链资讯”板块（别问为啥加这个，纯粹是蹭热点练手，毕竟现在谁不提两句 Web3 呢？）。

---

为什么选 Flutter？

先说结论：写一次，跑三端（iOS / Android / Web），热重载真香。

之前在厂里，前端、客户端、小程序三套人马各搞各的，沟通成本高到离谱。测试同学每次回归都要测三个平台，崩溃日志堆成山。而 Flutter 的核心优势在于 自绘引擎 + Dart 语言，UI 不依赖原生控件，所以一致性极高。

当然，也不是没有坑。比如某些平台特有的权限处理（Android 的存储权限、iOS 的相册访问），还是得写原生插件。但整体来看，对于中低复杂度的应用，Flutter 的 ROI（投入产出比）真的高。

---

从 flutter create 开始

我用的是 Flutter 3.19（最新 stable 版），Dart SDK 自带。初始化项目超简单：

flutter create resource_hub
cd resource_hub
flutter run

几秒后，模拟器上就跑起了经典的 “Hello World” —— 一个带计数器的页面。但这显然不够酷。我的目标是做一个能展示“资源列表”+“区块链快讯”的信息流应用。

目录结构规划

lib/
├── main.dart
├── models/
│   ├── resource.dart
│   └── blockchain_news.dart
├── screens/
│   ├── home_screen.dart
│   └── detail_screen.dart
├── widgets/
│   ├── resource_card.dart
│   └── news_banner.dart
└── services/
    └── api_service.dart

很标准的分层架构，model 存数据结构，screen 是页面，widget 是可复用组件，service 负责网络请求。

---

踩的第一个大坑：状态管理

一开始我图省事，直接用 setState，结果首页滑动一卡顿，性能分析工具显示 rebuild 太频繁。后来换成 Provider（轻量级，适合中小型项目），代码清爽多了。

比如加载资源列表：

// models/resource.dart
class Resource {
  final String title;
  final String url;
  final String category;

  Resource({required this.title, required this.url, required this category});
}

// services/api_service.dart
Future<List<Resource>> fetchResources() async {
  // 模拟 API 调用
  await Future.delayed(Duration(milliseconds: 500));
  return [
    Resource(title: 'Flutter 官方文档', url: 'https://docs.flutter.dev', category: '官方'),
    Resource(title: 'Awesome Flutter 列表', url: 'https://github.com/Solido/awesome-flutter', category: '社区'),
  ];
}

然后在 HomeScreen 里用 FutureBuilder + Consumer（Provider 提供者）来渲染：

Consumer<ApiService>(
  builder: (context, service, child) {
    return FutureBuilder<List<Resource>>(
      future: service.fetchResources(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (ctx, i) => ResourceCard(resource: snapshot.data![i]),
          );
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  },
)

💡 性能小贴士：ListView 记得加 itemExtent 或使用 ListView.separated，避免动态高度导致滚动卡顿。我在 iPhone 12 Pro 上实测，60fps 稳如老狗。

---

区块链模块：不是噱头，是真的用上了

虽然我只是把“区块链资讯”作为一个内容分类，但为了显得专业点，我接入了一个免费的 Crypto News API（比如 CryptoPanic）。数据结构类似：

class BlockchainNews {
  final String title;
  final String source;
  final DateTime publishedAt;
  final String url;
}

重点来了：如何让“区块链”不只是标签？

我加了个小功能——点击新闻可以跳转到 Etherscan 查看相关交易（如果新闻提到某个 NFT 项目或合约地址）。虽然只是字符串匹配，但用户体验立马不一样了。产品经理看了都说：“这有点 Web3 内味儿了！”

---

跨平台适配：你以为写一次就完事了？

天真！

Android 和 iOS 在导航栏高度、字体渲染、手势返回逻辑上都有差异。比如 iOS 默认支持右滑返回，但 Android 没有。我用了 WillPopScope 统一处理返回逻辑：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      // 自定义返回行为
      return true; // 允许返回
    },
    child: Scaffold(...),
  );
}

另外，字体回退机制很重要。我在上海租房，房东装的显示器是 1080p，但测试机有 2K 屏、iPhone SE 小屏…… 所以全局设置字体：

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyMedium: TextStyle(fontFamily: 'Roboto', fontSize: 14),
    ),
  ),
  home: HomeScreen(),
);

别忘了在 pubspec.yaml 里声明字体资源：

fonts:
  - family: Roboto
    fonts:
      - asset: assets/fonts/Roboto-Regular.ttf

---

性能优化：我的执念

作为前大厂性能优化小组成员，我对帧率、内存、启动时间极度敏感。这次 demo 我做了几件事：

1. 图片懒加载：用 cached_network_image 插件，避免列表滚动时卡顿。
2. 减少 Widget 重建：把静态部分抽成 const Widget。
3. Release 模式打包：flutter build ios --release / flutter build apk --release，体积比 debug 小 40%。

构建模式	APK 大小	启动时间 (冷启动)	FPS (列表滚动)
Debug	38 MB	2.1s	45~55
Release	22 MB	0.8s	58~60

看到 Release 模式下接近 60fps，我差点感动哭了——要知道以前在厂里为了优化 5fps，通宵改布局是家常便饭。

---

发布到应用市场：比想象中简单

我把 APK 传到小米应用商店，IPA 用 Transporter 上传到 App Store Connect。审核过程还算顺利，除了 Apple 问了一句：“你的应用是否使用加密货币功能？” 我赶紧回复：“仅展示资讯，无交易功能”，这才过审。

有趣的是，Google Play 对 64 位支持要求更严格，必须同时包含 arm64-v8a 和 x86_64（虽然后者基本没人用）。Flutter 默认生成全架构，所以没问题。

---

写在最后：辞职后反而学得更快

说实话，在大厂那会儿，天天被需求追着跑，学新技术全靠“碎片时间”。现在虽然没工资，但每天能专注写代码、调 UI、看源码，反而进步飞快。

这个 Resource Hub 项目我已经开源到 GitHub（名字就叫 flutter-resource-hub），欢迎 Star 和提 PR。如果你也在考虑转型移动开发，或者厌倦了多端维护的痛苦，Flutter 真的值得试试。

至于区块链？嗯……就当是个彩蛋吧。毕竟在这个行业，不懂点 buzzword 怎么混？😄

P.S. 下周打算用 Flutter Web 把这个项目部署成网页版，再接个 Firebase 做用户收藏功能。要是你感兴趣，评论区喊一声，我下次就写这个！