2025-02-14-【研发】Flutter全栈开发

Flutter 全栈开发指南

本文旨在为开发者提供一份从零基础到生产环境最佳实践的 Flutter 开发指南，涵盖基础概念、进阶架构、性能优化及常见问题解决方案。

一、基础篇：构建你的第一个应用

1.1 Dart 语言速览

Flutter 使用 Dart 语言。Dart 结合了静态语言的类型安全和动态语言的开发效率。

核心特性：

  • JIT & AOT：开发时 JIT (Just-In-Time) 提供热重载 (Hot Reload)，发布时 AOT (Ahead-Of-Time) 编译为原生机器码。
  • 空安全 (Null Safety)：默认开启，从编译层面杜绝空指针异常。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 变量声明
var name = 'Flutter'; // 类型推断
String version = '3.0'; // 显式类型
late String description; // 延迟初始化

// 函数
void main() {
  print('Hello $name');
}

// 异步编程
Future<void> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  print('Data loaded');
}

1.2 Widget 基础：一切皆组件

Flutter 的核心理念是 “Everything is a Widget”。

  • StatelessWidget：不可变状态组件（如 Icon, Text）。
  • StatefulWidget：持有可变状态的组件（如 Checkbox, TextField）。

示例：计数器组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

1.3 布局系统

Flutter 提供了强大的 Flex 布局模型。

  • Row/Column：水平/垂直线性布局。
  • Stack：层叠布局（类似 CSS absolute）。
  • Container：多功能容器（padding, margin, border, background）。
  • Expanded/Flexible：控制子组件在 Row/Column 中的伸缩。
1
2
3
4
5
6
7
8
9
Row(
  children: [
    const Icon(Icons.star),
    Expanded(
      child: Text('Title', style: TextStyle(fontSize: 18)),
    ),
    const Icon(Icons.arrow_forward),
  ],
)

二、进阶篇：架构与核心能力

2.1 状态管理 (State Management)

随着应用复杂度增加，setState 难以维护全局状态。推荐使用 Provider 或 Riverpod。

Provider 模式示例：

  1. 定义模型 (ChangeNotifier)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    class UserProvider extends ChangeNotifier {
      String _username = '';
      String get username => _username;

      void login(String name) {
        _username = name;
        notifyListeners(); // 通知监听者更新
      }
    }

  2. 注入状态 (ChangeNotifierProvider)

    1
    2
    3
    4
    5
    6
    7
    8
    void main() {
      runApp(
        ChangeNotifierProvider(
          create: (_) => UserProvider(),
          child: const MyApp(),
        ),
      );
    }

  3. 消费状态 (Consumer/Provider.of)

    1
    2
    3
    Consumer<UserProvider>(
      builder: (context, user, child) => Text('User: ${user.username}'),
    );

2.2 路由管理 (Navigation)

推荐使用 GoRouter，支持声明式路由、深层链接 (Deep Linking) 和路由守卫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'details/:id',
          builder: (context, state) {
            final id = state.pathParameters['id'];
            return DetailsPage(id: id!);
          },
        ),
      ],
    ),
  ],
);

2.3 网络请求

Dio 是 Flutter 最强大的 HTTP 客户端，支持拦截器、全局配置、FormData 等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
final dio = Dio(BaseOptions(baseUrl: 'https://api.example.com'));

// 添加拦截器
dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    options.headers['Authorization'] = 'Bearer token';
    return handler.next(options);
  },
));

// 发起请求
try {
  final response = await dio.get('/user/1');
  print(response.data);
} catch (e) {
  print('Error: $e');
}

三、最佳实践：生产环境指南

3.1 项目目录结构

良好的目录结构有助于维护。推荐 Feature-First 或 Layer-First 结构。

1
2
3
4
5
6
7
8
9
10
lib/
├── core/                # 核心通用模块 (网络, 存储, 主题)
├── features/            # 业务功能模块
│   ├── auth/            # 认证模块
│   │   ├── data/        # 数据层 (Repository, API)
│   │   ├── domain/      # 领域层 (Models, Entities)
│   │   └── presentation/# 表现层 (Pages, Widgets, Providers)
│   └── home/
├── main.dart
└── app.dart

3.2 性能优化

  1. 使用 const 构造函数：减少 Widget 重建开销。
  2. 避免在 build 方法中进行耗时操作：如网络请求或复杂计算。
  3. 列表优化：长列表必须使用 ListView.builder，避免一次性渲染所有 Item。
  4. 图片缓存：使用 cached_network_image 库。

3.3 国际化 (i18n)

使用 flutter_localizations 和 ARB 文件管理多语言。

  1. pubspec.yaml 添加依赖。
  2. 创建 l10n/app_en.arb 和 l10n/app_zh.arb。
  3. 代码中使用 AppLocalizations.of(context)!.hello。

四、常见问题 (FAQ)

Q1: 键盘弹出遮挡输入框怎么办？

解法：将页面主体包裹在 SingleChildScrollView 或 ListView 中，或使用 Scaffold 的 resizeToAvoidBottomInset: true (默认开启)。

Q2: 列表滚动卡顿？

排查：

  • 检查 Item 是否过于复杂。
  • 是否在 build 中加载大图（未使用缓存）。
  • Debug 模式下卡顿是正常的（JIT），请在 Profile/Release 模式下测试。

Q3: 如何减小 APK/IPA 体积？

  • 移除未使用的资源和库。
  • 使用 --obfuscate --split-debug-info 混淆并移除符号表。
  • Android 开启 minifyEnabled true 和 shrinkResources true。

参考资料

研发
#Flutter #Dart #移动端开发
2025-02-14-【研发】Flutter全栈开发
https://zhangyingxuan.github.io/2025-02-14-【研发】Flutter全栈开发/
作者
blowsysun
许可协议