Flutter 开发指南

jetsung

Flutter 开发指南

官网：https://flutter.dev/
中文站：https://flutter.cn/
插件站：https://pub.dev/
非官方中文社区：https://flutter-io.cn/

安装

curl -L https://fx4.cn/flutter | bash

# 自行设置路径 `$HOME/.local/flutter` 至 PATH

中国镜像站

## Flutter
export FLUTTER_STORAGE_BASE_URL="https://mirrors.cernet.edu.cn/flutter"
export PUB_HOSTED_URL="https://mirrors.cernet.edu.cn/dart-pub"

Flutter 常用命令

# 列出Flutter的版本信息
$ flutter --version

# 检查Flutter安装环境
$ flutter doctor

# 创建项目，VSCode安装方式可以使用快捷键创建，一样的
$ flutter create project_name

# 创建项目，并初始化包名与项目名称
$ flutter create --org com.example project_name

# 设备列表
$ flutter devices

# 运行并选择设备
$ flutter run

# 运行到指定设备
$ flutter run -d <device_id>

# 清理构建缓存
$ flutter clean

# 安装依赖包
$ flutter pub get

# 移除指定依赖包
$ flutter pub remove http

# 升级依赖包
$ flutter pub upgrade

# 升级指定依赖包
$ flutter pub upgrade http

Android

# 构建 APK 文件（Android）默认 
# 所有构建出的 apk 包位于 build/app/outputs/flutter-apk/ 下
$ flutter build apk

# 打包调试版（开发测试用，包含调试信息）
$ flutter build apk --debug

# 打包发布版（正式上线用，优化代码和资源）：
$ flutter build apk --release

# 生成分层 APK（适配不同 CPU 架构）
# 这会生成不同架构的 APK（如 armeabi-v7a、arm64-v8a），同样位于 build/app/outputs/flutter-apk/ 下
$ flutter build apk --split-per-abi

依赖包管理

# dependencies 中列出的包是应用程序运行时必需的，也就是说，这些依赖是项目在生产环境中执行时所需要的。
# dev_dependencies 中列出的包是仅在开发过程中需要的。这些包在生产环境中并不会被包含在内。它们用于开发、构建、测试和调试。

# 添加依赖包最新版本，默认都是添加到 dependencies
$ flutter pub add http

# 添加依赖包指定版本
$ flutter pub add http:1.0.0

# 添加依赖包到 dev_dependencies
$ flutter pub add --dev http

# 按照 pubspec.yaml 配置重新更新一遍本地插件，初始化、手动删除、手动添加都可以执行
# 同前端 npm install 一个意思
$ flutter pub get

# 更新所有插件
$ flutter pub upgrade

# 更新指定插件
$ flutter pub upgrade http

# 移除指定插件
$ flutter pub remove http

项目结构

代码开发在 lib 目录中完成，内部结构自行决定即可。

first_flutter_project/
├── android/
│   ├── app/                         # 存放 Android 构建相关的文件
│   │   ├── build.gradle             # Android 构建配置
│   │   └── src/
│   │       └── main/
│   │           ├── AndroidManifest.xml  # Android 配置文件
│   │           ├── java/              # Java 或 Kotlin 代码
│   │           └── res/               # Android 资源文件
│   └── build.gradle                  # Android 项目配置
├── ios/
│   ├── Runner/                       # 存放 iOS 构建相关的文件
│   │   ├── AppDelegate.swift         # iOS 的入口文件
│   │   ├── Info.plist                # iOS 配置文件
│   │   ├── Runner.xcodeproj          # Xcode 项目文件
│   └── Flutter/                      # 存放 Flutter 生成的 iOS 框架
├── lib/                              # 主要的 Dart 代码
│   ├── main.dart                     # 应用的入口文件
│   ├── app.dart                      # 应用的主逻辑（可选）
│   ├── pages/                        # 存放页面的文件夹
│   │   ├── home_page.dart            # 主页
│   │   └── settings_page.dart        # 设置页
│   ├── widgets/                      # 存放自定义组件的文件夹
│   │   ├── custom_button.dart        # 自定义按钮组件
│   │   └── app_bar.dart              # 自定义应用栏组件
│   └── models/                       # 存放数据模型的文件夹
│       └── user_model.dart           # 用户数据模型
├── assets/                            # 存放静态资源（图片、字体等）
│   ├── images/                       # 存放图片
│   │   ├── logo.png                  # 项目 logo
│   │   └── background.jpg            # 背景图片
│   ├── fonts/                        # 存放字体文件
│   │   └── custom_font.ttf           # 自定义字体
│   └── data/                         # 存放其他数据文件
│       └── sample_data.json          # JSON 数据文件
├── build/                             # 存放构建生成的临时文件
│   └── app/                           # 存放应用构建输出
│       └── outputs/
├── test/                              # 存放测试代码
│   └── widget_test.dart               # 测试 Flutter 小部件的代码
├── .gitignore                         # Git 忽略文件配置
├── .metadata                          # Flutter 项目的元数据文件
├── .flutter-plugins                   # 存放 Flutter 插件的配置信息
├── pubspec.yaml                       # Flutter 项目的配置文件，定义依赖项、版本等
├── pubspec.lock                       # 依赖的锁定文件，记录每个依赖的具体版本
├── analysis_options.yaml             # Dart 和 Flutter 的分析配置文件
├── base_project.iml                  # IntelliJ IDEA 或 Android Studio 项目的配置文件
└── README.md                          # 项目的说明文件

开发与调试

flutter run -d linux

Flutter run key commands.
    r Hot reload. 🔥🔥🔥
    R Hot restart. （热重启）
    h List all available interactive commands.
    d Detach (terminate "flutter run" but leave application running).
    c Clear the screen
    q Quit (terminate the application on the device).

插件与依赖

# 添加最新版本
$ flutter pub add http

# 添加指定版本
$ flutter pub add http:1.0.0

手动修改 pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 添加你需要的插件版本号，或者直接使用最新的版本

安装扩展：

$ flutter pub get

代码中使用

import 'package:http/http.dart' as http;

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('HTTP Request Example')),
        body: Center(child: ElevatedButton(
          onPressed: () {
            fetchData();
          },
          child: Text('Fetch Data'),
        )),
      ),
    );
  }

  // 使用 http 插件发送网络请求
  void fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      print('Data fetched successfully: ${response.body}');
    } else {
      print('Failed to load data');
    }
  }
}

更新扩展

# 更新所有插件
$ flutter pub upgrade

# 更新指定插件
$ flutter pub upgrade http

移除扩展

$ flutter pub remove http

手动移除 pubspec.yaml：

$ flutter pub get