希望打开APP后,显示当前时间..可能不实用,重在体验
安装Flutter
如果在arm架构的 Mac 电脑上进行开发,需要安装 Rosetta 2, 因为一些辅助工具需要,可通过手动运行下面的命令来安装:
sudo softwareupdate --install-rosetta --agree-to-license
之后安装flutter,可以通过下载zip包,也可以通过vscode来安装,详见 Download then install Flutter[1]
解压flutter,
![alt](https://img-blog.csdnimg.cn/img_convert/63fd446718f1e2832ed9a7c41165c9bd.png)
将flutter/bin添加到PATH环境变量中
export FLUTTER_HOME=~/Downloads/flutter
export PATH=$FLUTTER_HOME/bin:$PATH
# 这两行是为了解决网络相关问题
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
在终端中运行flutter doctor
来检查是否安装成功
![alt](https://img-blog.csdnimg.cn/img_convert/aaf130a7c91cdb0070fa43ff9a373f7e.png)
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ The Google Privacy Policy describes how data is handled in this service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
║ ║
║ To disable animations in this tool, use ║
║ 'flutter config --no-cli-animations'. ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this
source!
[✓] Flutter (Channel stable, 3.19.6, on macOS 13.0 22A380 darwin-arm64, locale zh-Hans-CN)
• Flutter version 3.19.6 on channel stable at /Users/fliter/Downloads/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 54e66469a9 (3 周前), 2024-04-17 13:08:03 -0700
• Engine revision c4cd48e186
• Dart version 3.3.4
• DevTools version 2.31.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
[✓] IntelliJ IDEA Ultimate Edition (version 2023.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.89.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.119
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 3 categories.
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.
Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:
flutter --disable-analytics
If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).
创建一个新项目
flutter create my_time_app
cd my_time_app
flutter run
![alt](https://img-blog.csdnimg.cn/img_convert/9fdb82dcd2b4b52469e1955401bfc8b5.png)
看起来,想要支持android和ios,需要安装如下内容?
[✗] Android工具链 - 用于开发Android设备 ✗ 无法找到 Android SDK。 请从https://developer.android.com/studio/index.html 安装Android Studio 在首次启动时,它将协助您安装Android SDK组件。 (或者请访问https://flutter.dev/docs/get-started/install/macos#android-setup 了解详细的说明)。 如果Android SDK已安装到自定义位置,请使用flutter config --android-sdk命令更新到该位置。
[!] Xcode - 用于iOS和macOS开发(Xcode 14.3.1) • Xcode位于/Applications/Xcode.app/Contents/Developer • Build 14E300c ✗ 未安装CocoaPods。 CocoaPods用于获取响应Dart端插件使用的iOS和macOS平台端插件代码。 如果没有安装CocoaPods,则插件在iOS或macOS上将无法工作。 更多信息,请参阅https://flutter.dev/platform-plugins。 要安装,请参阅 https://guides.cocoapods.org/using/getting-started.html#installation 中的说明。
下载&安装&打开Android Studio后,会自动下载Android的SDK,但因为是Google的东西,需要设置下代理
![alt](https://img-blog.csdnimg.cn/img_convert/d2dcd114ddd13afeb398bc53621116cc.png)
![alt](https://img-blog.csdnimg.cn/img_convert/bd0e20a1b15e68450e1a0d05eaea3b7e.png)
Preparing "Install Sources for Android 34 (revision 2)".
Downloading https://dl.google.com/android/repository/sources-34_r01.zip
"Install Sources for Android 34 (revision 2)" ready.
Installing Sources for Android 34 in /Users/fliter/Library/Android/sdk/sources/android-34
"Install Sources for Android 34 (revision 2)" complete.
"Install Sources for Android 34 (revision 2)" finished.
Preparing "Install Android SDK Platform 34 (revision 3)".
Downloading https://dl.google.com/android/repository/platform-34-ext7_r03.zip
"Install Android SDK Platform 34 (revision 3)" ready.
Installing Android SDK Platform 34 in /Users/fliter/Library/Android/sdk/platforms/android-34
"Install Android SDK Platform 34 (revision 3)" complete.
"Install Android SDK Platform 34 (revision 3)" finished.
Preparing "Install Android SDK Build-Tools 34 v.34.0.0".
Downloading https://dl.google.com/android/repository/build-tools_r34-macosx.zip
"Install Android SDK Build-Tools 34 v.34.0.0" ready.
Installing Android SDK Build-Tools 34 in /Users/fliter/Library/Android/sdk/build-tools/34.0.0
"Install Android SDK Build-Tools 34 v.34.0.0" complete.
"Install Android SDK Build-Tools 34 v.34.0.0" finished.
Preparing "Install Android SDK Platform-Tools v.35.0.1".
Downloading https://dl.google.com/android/repository/platform-tools_r35.0.1-darwin.zip
"Install Android SDK Platform-Tools v.35.0.1" ready.
Installing Android SDK Platform-Tools in /Users/fliter/Library/Android/sdk/platform-tools
"Install Android SDK Platform-Tools v.35.0.1" complete.
"Install Android SDK Platform-Tools v.35.0.1" finished.
Preparing "Install Android Emulator v.34.2.13".
Downloading https://dl.google.com/android/repository/emulator-darwin_aarch64-11772612.zip
"Install Android Emulator v.34.2.13" ready.
Installing Android Emulator in /Users/fliter/Library/Android/sdk/emulator
"Install Android Emulator v.34.2.13" complete.
"Install Android Emulator v.34.2.13" finished.
Parsing /Users/fliter/Library/Android/sdk/build-tools/34.0.0/package.xml
Parsing /Users/fliter/Library/Android/sdk/emulator/package.xml
Parsing /Users/fliter/Library/Android/sdk/platform-tools/package.xml
Parsing /Users/fliter/Library/Android/sdk/platforms/android-34/package.xml
Parsing /Users/fliter/Library/Android/sdk/sources/android-34/package.xml
Android SDK is up to date.
export ANDROID_HOME="/Users/fliter/Library/Android/sdk" #android sdk目录,替换为你自己的即可
#export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/cmdline-tools/latest/bin
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android SDK 安装目录: /Users/yourname/Library/Android/sdk
注意在安装SDK时要勾选tool这一步. 如果没选,要打开IDE,SDK那里选择&下载,更多参考[2]
可以不断执行 flutter doctor
, 根据提示信息,进行相应操作
flutter doctor --android-licenses
![alt](https://img-blog.csdnimg.cn/img_convert/6d456e73293ff370f50682bf55228727.png)
此时,再次执行 flutter run
![alt](https://img-blog.csdnimg.cn/img_convert/2e0f985e103ab9a0433788e2c56bb3b5.png)
依然没有出现Android设备.
需要连接一个安卓设备,或者运行安卓模拟器
打开Android Studio ,运行一个模拟器
![alt](https://img-blog.csdnimg.cn/img_convert/1c36097b61bd6254f4bb8d6e2938f61b.png)
再次执行flutter run
(Android Studio 现在支持代码更改后的实时热加载,可以研究下怎么设置)
在lib/main.dart中,用如下内容覆盖:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Current Time App',
home: Scaffold(
appBar: AppBar(
title: Text('爽哥制作--Current Time'),
),
body: Center(
child: ClockWidget(),
),
),
);
}
}
class ClockWidget extends StatefulWidget {
@override
_ClockWidgetState createState() => _ClockWidgetState();
}
class _ClockWidgetState extends State<ClockWidget> {
String _currentTime = '';
@override
void initState() {
super.initState();
_updateTime();
}
void _updateTime() {
setState(() {
_currentTime = DateTime.now().toString();
});
// Update time every second
Future.delayed(Duration(seconds: 1), () {
_updateTime();
});
}
@override
Widget build(BuildContext context) {
return Text(
_currentTime,
style: TextStyle(fontSize: 24),
);
}
}
点击右上方的Run按钮
![alt](https://img-blog.csdnimg.cn/img_convert/98980934276ca9925a9c3346daf392fd.png)
![alt](https://img-blog.csdnimg.cn/img_convert/b4954749ff3c2e9f55ced3ff3285d378.png)
![alt](https://img-blog.csdnimg.cn/img_convert/1075d10576fa7f0ac1848d1e808fe75a.png)
可见符合预期.
代码ok, 之后是打包&在手机上安装
如何打包,并在安卓手机和苹果手机上安装?
要在 Android 和 iOS 设备上安装 Flutter 应用程序,需要先将应用程序打包为相应的安装包格式,即 APK(Android)和 IPA(iOS)。以下是针对每个平台的步骤:
在 Android 上安装应用程序:
-
生成 APK 文件:
-
打开终端或命令提示符,并导航到 Flutter 项目目录。 -
运行命令 flutter build apk
,这将生成一个 APK 文件。 -
APK 文件通常位于 build/app/outputs/flutter-apk
目录中。
-
-
传输 APK 文件到 Android 设备:
-
将生成的 APK 文件传输到你的 Android 设备,可以通过 USB 连接、电子邮件、云存储服务等方式。
-
-
在 Android 设备上安装应用程序:
-
在 Android 设备上导航到 APK 文件所在的位置。 -
点击 APK 文件以安装应用程序。 -
如果系统提示未知来源,请在设置中允许安装来自未知来源的应用程序。
-
![alt](https://img-blog.csdnimg.cn/img_convert/4d36c5f3edc8bcb28dc6f7a3e943eb41.png)
![alt](https://img-blog.csdnimg.cn/img_convert/e3c024aafb53d547e303571d7c460e58.png)
debug比release体积大得多
![alt](https://img-blog.csdnimg.cn/img_convert/7a470d4980823d69926ac08bc6c62461.png)
![alt](https://img-blog.csdnimg.cn/img_convert/e98f5d1b6a53ca8d9546b58e6ea7c6ae.png)
因为qq/微信传,会自动把apk改成apk.1, 故意不让你能直接安装...
我用的是传到天翼云盘上面
![alt](https://img-blog.csdnimg.cn/img_convert/f63b2f6e6a7ef0f08b2b9c80f7cb50e0.png)
![alt](https://img-blog.csdnimg.cn/img_convert/af334af38a1beee6e5c849c44a0bbabe.png)
在 iOS 上安装应用程序:
在 iOS 上安装应用程序比较复杂,因为苹果设备上的应用程序必须经过苹果的审核和签名过程才能安装。有以下几个选项:
-
使用 TestFlight:
-
如果是开发者,在 Apple Developer Program 中注册并获取了开发者账户,则可以使用 TestFlight 将应用程序部署到测试用户。 -
在 Xcode 中打开项目,选择 iOS 设备作为目标,然后点击 Archive。 -
在 Organizer 中将项目归档,然后上传到 App Store Connect。 -
在 App Store Connect 中创建内部测试,并邀请测试用户安装应用程序。
-
-
使用 Xcode 直接安装(仅限于开发者):
-
在 Xcode 中打开你的项目,选择 iOS 设备作为目标。 -
在 Xcode 中运行你的应用程序,它将自动在设备上安装。 -
这种方法只适用于开发者,并且需要使用 Xcode。
-
-
使用第三方服务:
-
有一些第三方服务(例如 Diawi、TestFairy 等)可以帮助在不经过 App Store 的情况下在 iOS 设备上安装应用程序。可以将应用程序上传到这些服务,并获取一个安装链接,然后在设备上打开链接以安装应用程序。
-
无论选择哪种方法,都需要注意 iOS 平台的限制和审核流程。
Download then install Flutter: https://docs.flutter.dev/get-started/install/macos/mobile-ios?tab=download
[2]参考: https://www.cnblogs.com/bugtraq/p/16048707.html
本文由 mdnice 多平台发布