知识库

Appearance

Return to top
On this page

Flutter 快速入门

Flutter是Google开发的开源UI工具包，可以帮助开发者使用一套代码库构建高性能、高保真的原生体验应用程序，支持移动、Web、桌面等多个平台。Flutter基于Dart编程语言，提供了丰富的组件和工具链。

什么是Flutter

Flutter是一个跨平台UI工具包，具有以下特点：

  • 高性能：使用Dart语言，编译为原生ARM或x64代码
  • 原生体验：直接渲染到平台的画布，不依赖原生控件
  • 热重载：快速开发迭代，实时查看代码更改效果
  • 丰富组件：提供大量Material Design和Cupertino组件
  • 可扩展性：支持与原生代码集成

安装Flutter

系统要求

  • 操作系统：Windows 7/8/10/11、macOS、Linux
  • 磁盘空间：至少1.64GB（不包括IDE和工具）
  • 命令行工具：PowerShell、bash、zsh等

安装步骤

Windows

  1. 访问Flutter官网下载Flutter SDK
  2. 解压到指定目录（如C:\src\flutter）
  3. 添加Flutter到系统PATH环境变量
  4. 运行flutter doctor检查依赖

macOS

bash
# 使用Homebrew安装
brew install --cask flutter

# 或者手动下载并解压
cd ~/development
unzip ~/Downloads/flutter_macos_*.zip
export PATH="$PATH:`pwd`/flutter/bin"

Linux (Ubuntu)

bash
# 下载Flutter SDK
cd ~
tar xf ~/Downloads/flutter_linux_*.tar.xz

# 添加到PATH
export PATH="$PATH:`pwd`/flutter/bin"

# 永久添加到.bashrc或.zshrc
echo 'export PATH="$PATH:`pwd`/flutter/bin"' >> ~/.bashrc
source ~/.bashrc

环境配置

检查安装

bash
# 验证Flutter安装
flutter doctor

# 查看Flutter版本
flutter --version

# 获取更多帮助
flutter --help

平台特定设置

Android

  1. 安装Android Studio
  2. 安装Android SDK、SDK平台工具、SDK构建工具
  3. 设置ANDROID_HOME环境变量
  4. 创建Android虚拟设备(AVD)

iOS

  1. 安装Xcode
  2. 在Xcode中同意许可协议
  3. 安装iOS模拟器
  4. 确保Xcode命令行工具已安装

创建第一个Flutter应用

创建新项目

bash
# 创建新Flutter项目
flutter create my_flutter_app

# 使用特定模板
flutter create -t app my_app

# 使用特定编程语言
flutter create --org com.example my_app

项目结构 

my_flutter_app/
├── lib/
│   └── main.dart          # 应用入口文件
├── test/                  # 测试文件
├── pubspec.yaml           # 依赖配置文件
├── android/              # Android特定代码
├── ios/                  # iOS特定代码
├── web/                  # Web特定代码
├── windows/              # Windows特定代码
├── macos/                # macOS特定代码
└── linux/                # Linux特定代码

基本应用结构

dart
// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

运行应用

在不同平台上运行

bash
# 在连接的设备上运行
flutter run

# 在特定设备上运行
flutter run -d device_id

# 在Web上运行
flutter run -d chrome

# 构建并运行
flutter run --release

热重载

在开发过程中，使用热重载快速查看更改：

bash
# 启用热重载模式
flutter run

# 在代码编辑器中保存更改，或使用：
# - VS Code: Ctrl+S (保存)
# - Android Studio: Ctrl+S (保存)
# - 命令行: r 键

基本Widget

StatelessWidget vs StatefulWidget

dart
// StatelessWidget - 无状态组件
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('This is a stateless widget'),
    );
  }
}

// StatefulWidget - 有状态组件
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('This is a stateful widget'),
    );
  }
}

常用Widget

dart
// 文本组件
Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

// 按钮组件
ElevatedButton(
  onPressed: () {
    print('Button pressed');
  },
  child: Text('Click me'),
)

// 图片组件
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

// 容器组件
Container(
  width: 200,
  height: 200,
  color: Colors.red,
  child: Center(
    child: Text('Container with child'),
  ),
)

布局Widget

线性布局

dart
// 垂直布局
Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

// 水平布局
Row(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

网格布局

dart
GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Card(
      child: Center(
        child: Text('Item $index'),
      ),
    );
  }),
)

包管理

添加依赖

在pubspec.yaml文件中添加依赖：

yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5
  provider: ^6.0.5
  shared_preferences: ^2.1.1

然后运行：

bash
flutter pub get

常用包

  • http - 网络请求
  • provider - 状态管理
  • shared_preferences - 本地数据存储
  • flutter_svg - SVG图像支持
  • cached_network_image - 网络图片缓存

调试工具

Flutter Inspector

bash
# 启动应用时启用调试
flutter run --debug

# 在开发工具中查看Widget树
# 使用Ctrl+Shift+I (Windows/Linux) 或 Cmd+Shift+I (Mac) 打开DevTools

常用调试命令

bash
# 查看设备列表
flutter devices

# 查看应用信息
flutter logs

# 性能分析
flutter run --profile

构建应用

构建不同平台的应用

bash
# 构建Android APK
flutter build apk

# 构建iOS应用
flutter build ios

# 构建Web应用
flutter build web

# 构建桌面应用
flutter build windows  # Windows
flutter build macos    # macOS
flutter build linux    # Linux

开发工具

推荐IDE

  • Visual Studio Code：轻量级，丰富的Flutter插件
  • Android Studio：功能完整，集成Android开发工具
  • IntelliJ IDEA：强大的Java/Kotlin开发环境

必要插件

  • Flutter - 提供Flutter开发支持
  • Dart - Dart语言支持
  • Flutter Intl - 国际化支持
  • Flutter Widget Inspector - Widget检查工具

第一个完整应用示例

dart
import 'package:flutter/material.dart';

void main() {
  runApp(const TodoApp());
}

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  const TodoListScreen({super.key});

  @override
  State<TodoListScreen> createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  final List<String> _todos = <String>[];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todos.add(_controller.text);
      });
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: _todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_todos[index]),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _todos.removeAt(index);
                });
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: const Text('Add Todo'),
                content: TextField(
                  controller: _controller,
                  decoration: const InputDecoration(hintText: 'Enter todo'),
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Cancel'),
                  ),
                  TextButton(
                    onPressed: () {
                      _addTodo();
                      Navigator.pop(context);
                    },
                    child: const Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

总结

Flutter提供了一个强大的跨平台UI开发框架，通过单一代码库可以构建高性能的应用程序。通过本章的学习，你应该已经掌握了Flutter的基本概念、安装方法和基本操作。在接下来的章节中，我们将深入探讨Flutter的高级特性和最佳实践。