Flutter 2023 年 7 月 10 日

使用Flutter开发一套可同时运行在Android和iOS平台的代码

Flutter是一种跨平台移动应用开发框架，它允许开发者使用单一代码库构建高性能、美观且可在多个平台上运行的应用程序。本文将介绍如何使用Flutter开发一套同时适用于Android和iOS平台的代码。

了解 Flutter 框架

Flutter 是由 Google 开发的 UI 工具包，用于构建漂亮、快速且可在多个平台上运行的移动应用程序。与传统方式相比，Flutter 采用了全新的渲染引擎，并使用 Dart 语言作为其开发语言。掌握 Flutter 的基本原理和核心概念是使用它开发跨平台应用的第一步。

装 Flutter 开发环境

下载 Flutter SDK：

访问 Flutter 官方网站（https://flutter.dev）并点击”Get Started”按钮。选择和你操作系统匹配的下载链接

###配置环境变量：

对于 macOS 用户：打开 Terminal 应用程序，执行以下命令来编辑.bash_profile 文件：

open -e .bash_profile

在打开的文本编辑器中，添加以下行并保存文件：

export PATH="$PATH:[YOUR_FLUTTER_PATH]/bin"

然后执行以下命令使更改生效：

source .bash_profile

对于 Windows 用户：右键点击“此电脑”，选择“属性”并点击“高级系统设置”。在弹出窗口中，点击“环境变量”按钮。在“用户变量”部分下，找到名为“Path”的变量，并将 Flutter 的 bin 目录添加到变量值中。

###安装依赖项： Flutter 需要一些额外的依赖项才能正常运行。按照以下说明安装所需的依赖项：

macOS：在终端中执行以下命令：

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Windows：无需额外安装依赖项。运行 flutter doctor：打开终端或命令提示符，导航到您的 Flutter 安装目录，并执行以下命令来运行 flutter doctor 命令：

flutter doctor

flutter doctor 命令将会检查您的环境是否配置正确，并提供修复错误的建议。按照提示修复任何问题，直到 flutter doctor 命令不再报错。

安装完 Flutter 开发环境后，您可以创建一个新的 Flutter 项目。以下是一个简单的 Flutter 代码示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

在创建好 Flutter 项目之后，您可以使用flutter run命令来运行应用程序。例如，通过终端导航到项目目录，并执行以下命令：

flutter run

至此，这就算完成基本的环境配置了。

###创建新项目：使用 Flutter 命令行工具创建一个新的 Flutter 项目。打开终端或命令提示符，导航到您想要创建项目的目录，并运行以下命令：

flutter create my_flutter_app

写一套共享代码

在 Flutter 里面 共享代码是一个特有的特性。并将其同时用于 Android 和 iOS 平台。在 Flutter 项目中，你的代码将位于 lib 文件夹下。你可以创建各种 Dart 文件，如 widgets 和 util，用于组织和管理你的代码。

###UI 示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UI Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: () {
                // 按钮点击事件
                print('Button Clicked');
              },
              child: Text('点击我'),
            ),
            SizedBox(height: 20),
            Text(
              'Welcome to Flutter UI Demo',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

##调试和测试推荐使用Android Studio开发工具

##构建发布这一步就是我们最重要的一步了，如何构建一个既可以在 Android 上运行又可以在 iOS 上运行的 Flutter 应用程序？

首先我们要知道 Flutter 特性其中之一就是能够构建双平台可用代码。跨平台特性：Flutter 使用单一的代码库来创建应用程序的 UI 和业务逻辑，并且能够在多个平台上运行。这意味着您可以使用相同的代码来构建 Android 和 iOS 应用程序，以及在其他支持 Flutter 的平台上运行，如 Web、桌面和嵌入式设备。所以我们无需过多操作。即可构建。

构建 Android 应用程序：

在终端或命令提示符中，导航到您的 Flutter 项目根目录。

使用以下命令构建 Android 应用程序：

flutter build apk

这将生成一个 APK 文件，它包含了您的 Flutter 应用程序的代码和资源。

构建 iOS 应用程序：

在终端或命令提示符中，导航到您的 Flutter 项目根目录。

使用以下命令构建 iOS 应用程序：

flutter build ios

这将生成一个 Xcode 项目，你可以使用 Xcode 来编译和打包你的 Flutter 应用程序，并在 iOS 设备上运行。

以上是构建既能在 Android 上运行又能在 iOS 上运行的 Flutter 应用程序的基本步骤。确保您安装了适当的 Android 开发工具（如 Android Studio）和 iOS 开发工具（如 Xcode），以便构建和部署应用程序到各个平台。

请注意，在构建 iOS 应用程序时，您可能需要在 Xcode 中设置一些配置（如签名证书、App ID 等）。这些详细步骤超出了本回答的范围，因此建议您参考 Flutter 官方文档中的有关 Android 和 iOS 构建的更详细说明。

本文同步我的技术文档

作者：吃个甘蔗嚼一年发表日期：2023 年 7 月 10 日