了解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 {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
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 {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter UI Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
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构建的更详细说明。
