Flutter 使用

一、引言

Flutter 是 Google 开发的开源移动应用开发框架，可用于快速构建高性能、高保真的移动应用，支持 iOS 和 Android 两大主流平台，同时也能用于开发 Web、桌面应用等。本使用文档将帮助你快速上手 Flutter 开发。

二、环境搭建

2.1 安装 Flutter SDK

1. 下载 SDK

访问 Flutter 官方网站（https://flutter.dev/ ），根据你的操作系统（Windows、Mac、Linux）下载对应的 Flutter SDK 压缩包。

1. 解压 SDK

将下载的压缩包解压到你希望安装的目录，例如 C:\src\flutter（Windows）或 /Users/yourname/flutter（Mac）。

1. 配置环境变量

• Windows：将 flutter\bin 目录添加到系统的 PATH 环境变量中。
• Mac/Linux：编辑 ~/.bashrc 或 ~/.zshrc 文件，添加以下内容：

export PATH="$PATH:/Users/yourname/flutter/bin"

然后执行 source ~/.bashrc 或 source ~/.zshrc 使配置生效。

2.2 安装开发工具

推荐使用 Visual Studio Code 或 Android Studio 作为 Flutter 开发工具，以下是安装配置步骤：

2.2.1 Visual Studio Code

1. 下载并安装 Visual Studio Code（https://code.visualstudio.com/ ）。
2. 打开 Visual Studio Code，在扩展市场中搜索并安装 “Flutter” 和 “Dart” 扩展。

2.2.2 Android Studio

1. 下载并安装 Android Studio（https://developer.android.com/studio ）。
2. 打开 Android Studio，在 SDK Manager 中安装 Android SDK 和相关工具。
3. 安装 Flutter 和 Dart 插件：打开 “File” -> “Settings” -> “Plugins”，搜索并安装 “Flutter” 和 “Dart” 插件。

2.3 验证环境

打开终端，运行以下命令验证 Flutter 环境是否安装成功：

flutter doctor

根据提示解决出现的问题。

三、创建和运行 Flutter 项目

3.1 创建项目

使用以下命令创建一个新的 Flutter 项目：

flutter create my_flutter_app
cd my_flutter_app

3.2 运行项目

3.2.1 连接设备

确保你的 Android 或 iOS 设备已通过 USB 连接到计算机，或者使用模拟器。

3.2.2 运行项目

在项目根目录下，运行以下命令启动应用：

flutter run

Flutter 会自动检测连接的设备并将应用安装运行。

四、Flutter 基本概念

4.1 Widget

在 Flutter 中，一切都是 Widget。Widget 是构建 UI 的基本元素，分为 StatelessWidget 和 StatefulWidget。

4.1.1 StatelessWidget

StatelessWidget 是不可变的，一旦创建，其属性就不能再改变。以下是一个简单的 StatelessWidget 示例：

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, StatelessWidget!');
  }
}

4.1.2 StatefulWidget

StatefulWidget 是可变的，当状态发生变化时，Widget 会重新构建。以下是一个简单的 StatefulWidget 示例：

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

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

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

4.2 Layout

Flutter 提供了多种布局 Widget，如 Column、Row、Stack 等，用于构建复杂的 UI 布局。

4.2.1 Column

Column 用于垂直排列子 Widget。示例如下：

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

4.2.2 Row

Row 用于水平排列子 Widget。示例如下：

Row(
  children: [
    Text('Left'),
    Text('Center'),
    Text('Right'),
  ],
)

4.2.3 Stack

Stack 用于将子 Widget 堆叠在一起。示例如下：

Stack(
  children: [
    Image.asset('assets/image.png'),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Overlay Text'),
    ),
  ],
)

五、与原生代码交互

Flutter 提供了多种方式与原生代码进行交互，如 MethodChannel、EventChannel 等。

5.1 MethodChannel

MethodChannel 用于在 Flutter 和原生代码之间进行方法调用。以下是一个简单的示例：

5.1.1 Flutter 端代码

import 'package:flutter/services.dart';

final MethodChannel _channel = MethodChannel('com.example/my_channel');

Future<String> getPlatformVersion() async {
  try {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  } on PlatformException catch (e) {
    return 'Failed to get platform version: ${e.message}';
  }
}

5.1.2 Android 端代码（Kotlin）

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example/my_channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "getPlatformVersion") {
                result.success("Android ${android.os.Build.VERSION.RELEASE}")
            } else {
                result.notImplemented()
            }
        }
    }
}

六、发布应用

6.1 Android

1. 生成签名密钥：

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

1. 配置 build.gradle 文件：

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

1. 生成 APK 或 App Bundle：

flutter build apk --release
flutter build appbundle --release

6.2 iOS

1. 配置证书和描述文件：在 Apple Developer 网站上创建证书和描述文件，并在 Xcode 中进行配置。
2. 生成 IPA 文件：

flutter build ios --release
open ios/Runner.xcworkspace

在 Xcode 中选择 “Product” -> “Archive”，然后在 Archived Apps 中选择 Export 导出 IPA 文件。