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 的"状态驱动视图"模式。

开发环境搭建

安装 Flutter SDK
- 下载 SDK 并解压到本地，将 bin 目录添加到系统 PATH。
- 运行 flutter doctor 检查依赖（如 Android Studio、Xcode）。
配置 IDE
- Android Studio/VSCode：安装 Flutter 和 Dart 插件。
- Xcode：配置 iOS 模拟器和签名证书。

创建项目

bash 复制代码

flutter create my_app
cd my_app
flutter run

示例代码

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

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 开发流程。