Flutter简单讲解

Flutter 简介

Flutter 是由 Google 开发的开源 UI 框架，用于构建跨平台应用（iOS、Android、Web、桌面等）。其核心特点包括：

• 跨平台：一套代码可编译为多平台原生应用。
• 高性能：基于 Dart 语言和 Skia 图形引擎，直接渲染组件，避免原生桥接开销。
• 热重载：快速预览代码更改，无需重新编译。
• 丰富的组件库：提供 Material Design 和 Cupertino 风格的预制组件。

Flutter 核心概念

1. Widget
Flutter 应用由嵌套的 Widget 构成，分为两类：

• 无状态 Widget（StatelessWidget）：不可变 UI 组件（如文本、图标）。
• 有状态 Widget（StatefulWidget）：动态更新 UI（如计数器、表单）。

2. Dart 语言

• 面向对象，支持 JIT（开发时热重载）和 AOT（发布时高效编译）。
• 异步编程通过 Future 和 async/await 实现。

3. 响应式框架
UI 随数据状态自动更新，类似 React 的“状态驱动视图”模式。

开发环境搭建

1. 安装 Flutter SDK

   • 下载 SDK 并解压到本地，将 bin 目录添加到系统 PATH。
   • 运行 flutter doctor 检查依赖（如 Android Studio、Xcode）。

2. 配置 IDE

   • Android Studio/VSCode：安装 Flutter 和 Dart 插件。
   • Xcode：配置 iOS 模拟器和签名证书。

3. 创建项目

   flutter create my_app
   cd my_app
   flutter run
   

示例代码

基础计数器应用（main.dart）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: Center(child: Counter()),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() => _count++);
  }

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

常用插件与工具

• 状态管理：Provider、Riverpod、Bloc。
• 网络请求：Dio、http。
• 本地存储：SharedPreferences、Hive。
• 路由导航：GoRouter、AutoRoute。

学习资源

• 官方文档：flutter.dev
• 社区：Flutter 中文网（flutter.cn）、GitHub 开源项目。
• 实战课程：Udemy、Coursera 上的 Flutter 全栈开发教程。

通过结合文档与实战项目，可快速掌握 Flutter 开发流程。