开发一款简易APP

news2024/10/5 19:20:11

希望打开APP后,显示当前时间..可能不实用,重在体验


安装Flutter


如果在arm架构的 Mac 电脑上进行开发,需要安装 Rosetta 2, 因为一些辅助工具需要,可通过手动运行下面的命令来安装:

sudo softwareupdate --install-rosetta --agree-to-license

之后安装flutter,可以通过下载zip包,也可以通过vscode来安装,详见 Download then install Flutter[1]

解压flutter,

alt

将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

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 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

看起来,想要支持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
alt
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

此时,再次执行 flutter run

alt

依然没有出现Android设备.

需要连接一个安卓设备,或者运行安卓模拟器

打开Android Studio ,运行一个模拟器

alt

再次执行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
alt
alt

可见符合预期.



代码ok, 之后是打包&在手机上安装


如何打包,并在安卓手机和苹果手机上安装?


要在 Android 和 iOS 设备上安装 Flutter 应用程序,需要先将应用程序打包为相应的安装包格式,即 APK(Android)和 IPA(iOS)。以下是针对每个平台的步骤:

在 Android 上安装应用程序:

  1. 生成 APK 文件

    • 打开终端或命令提示符,并导航到 Flutter 项目目录。
    • 运行命令 flutter build apk,这将生成一个 APK 文件。
    • APK 文件通常位于 build/app/outputs/flutter-apk 目录中。
  2. 传输 APK 文件到 Android 设备

    • 将生成的 APK 文件传输到你的 Android 设备,可以通过 USB 连接、电子邮件、云存储服务等方式。
  3. 在 Android 设备上安装应用程序

    • 在 Android 设备上导航到 APK 文件所在的位置。
    • 点击 APK 文件以安装应用程序。
    • 如果系统提示未知来源,请在设置中允许安装来自未知来源的应用程序。
alt
alt

debug比release体积大得多

alt
alt

因为qq/微信传,会自动把apk改成apk.1, 故意不让你能直接安装...

我用的是传到天翼云盘上面

alt
alt

在 iOS 上安装应用程序:

在 iOS 上安装应用程序比较复杂,因为苹果设备上的应用程序必须经过苹果的审核和签名过程才能安装。有以下几个选项:

  1. 使用 TestFlight

    • 如果是开发者,在 Apple Developer Program 中注册并获取了开发者账户,则可以使用 TestFlight 将应用程序部署到测试用户。
    • 在 Xcode 中打开项目,选择 iOS 设备作为目标,然后点击 Archive。
    • 在 Organizer 中将项目归档,然后上传到 App Store Connect。
    • 在 App Store Connect 中创建内部测试,并邀请测试用户安装应用程序。
  2. 使用 Xcode 直接安装(仅限于开发者):

    • 在 Xcode 中打开你的项目,选择 iOS 设备作为目标。
    • 在 Xcode 中运行你的应用程序,它将自动在设备上安装。
    • 这种方法只适用于开发者,并且需要使用 Xcode。
  3. 使用第三方服务

    • 有一些第三方服务(例如 Diawi、TestFairy 等)可以帮助在不经过 App Store 的情况下在 iOS 设备上安装应用程序。可以将应用程序上传到这些服务,并获取一个安装链接,然后在设备上打开链接以安装应用程序。

无论选择哪种方法,都需要注意 iOS 平台的限制和审核流程。

参考资料
[1]

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 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1643602.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一篇文章带你深入了解“指针”

一篇文章带你深入了解“指针” 内存和地址了解指针指针类型const修饰指针指针的运算指针与整数之间的运算指针与指针之间的运算指针的关系运算 void* 指针传值调用和传址调用数组和指针的关系野指针野指针的形成原因规避野指针 二级指针字符指针指针数组数组指针数组传参一维数…

动态炫酷的新年烟花网页代码

烟花效果的实现可以采用前端技术&#xff0c;如HTML、CSS和JavaScript。通过结合动画、粒子效果等技术手段&#xff0c;可以创建出独特而炫目的烟花效果。同时&#xff0c;考虑到性能和兼容性&#xff0c;需要确保效果在各种设备上都能够良好运行。 效果显示http://www.bokequ.…

Transformer中的数据输入构造

文章目录 1. 文本内容2. 字典构造2.1 定义一个类用于字典构造2.2 拆分文本2.3 构造结果 3. 完整代码 1. 文本内容 假如我们有如下一段文本内容&#xff1a; Optics It is the branch of physics that studies the behaviour and properties of light . Optical Science 这段…

代码随想录Day 37|Leetcode|Python|● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结…

Java web第五次作业

1.在idea中配置好数据源 2、视频案例中只给出了查询所有结果的示例&#xff0c;请自己完成添加、删除、修改操作的代码。以下供参 考。 Delete("delete from emp where id#{id}") public void delete(Integer id); 测试代码 Test public void testDelete(){ empMa…

AI产品经理需要懂的技术全景图

AI产品经理需要懂技术&#xff0c;以便与算法工程师同频沟通&#xff0c;以及合理管控AI项目进度。 项目掌握内容掌握边界数学统计学基础概念常见概念知道、了解模型构建 模型构建流程涉及角色每个角色工作内容清楚知道每个角色该做什么&#xff0c;需要花费多少成本&#xff…

使用python开发的词云图生成器2.0

使用python开发的词云图生成器2.0 更新部分词云图主要三方库工具介绍和效果工具界面&#xff1a; 代码 更新部分 1.支持选择字体&#xff1b; 2.支持选择词云图形状 词云图 词云图啊&#xff0c;简单来说&#xff0c;它可以把文本数据中的高频关键词变成不同大小、颜色的词汇…

「C/C++ 01」scanf()与回车滞留问题

目录 〇、scanf()接收用户输入的流程 一、回车的缓冲区滞留问题是什么&#xff1f; 二、为什么&#xff1f; 三、四个解决方法&#xff1a; 1. 在前面的scanf()中加上\n 2. 在scanf("%c")中添加空格 3. 使用getchar()来吸收回车 4. 使用fflush()清空缓冲区 〇、scan…

seata容器部署nacos注册配置中心、db存储实践记录

seata容器部署nacos注册&配置中心、db存储实践记录 说明seata容器初步部署(可跳过)seata初部署获取配置文件springboot简单集成seata测试 seata使用nacos注册中心、db存储环境准备准备nacos配置中心配置准备Mysql数据库 seata配置nacos注册中心准备docker-compose.yaml文件…

stm32单片机开发四、USART“串口通信“

串口的空闲状态时高电平&#xff0c;起始位是低电平&#xff0c;来打破空闲状态的高电平 必须要有停止位&#xff0c;停止位一般为一位高电平 串口常说的数据为8N1&#xff0c;其实就是8个数据位&#xff08;固定的&#xff09;&#xff0c;N就是none&#xff0c;也就是0个校验…

mfc140.dll丢失如何修复?分享各种mfc140.dll丢失的解决方法

在Windows操作系统的世界里&#xff0c;动态链接库&#xff08;Dynamic Link Library, DLL&#xff09;扮演着举足轻重的角色&#xff0c;它们是实现程序功能共享、减少内存占用、促进模块化编程的关键组件。MFC140.dll便是众多DLL文件中的一员&#xff0c;它与微软基础类库&am…

【kettle006】kettle访问华为openGauss高斯数据库并处理数据至execl文件(已更新)

1.一直以来想写下基于kettle的系列文章&#xff0c;作为较火的数据ETL工具&#xff0c;也是日常项目开发中常用的一款工具&#xff0c;最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下华为openGauss高斯数据库相关知识体系 3.欢迎批评指正&#xff0c;跪谢…

网络基础「HTTPS」

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f383;操作环境&#xff1a; CentOS 7.6 腾讯云远程服务器 文章目录 1.基本概念1.1.HTTP协议面临的问题1.2.加密与解密1.3.数字摘要1.4.数字签名 2.解决方案2.1.「对称式加密」2.2.「非对…

变分自编码器(VAE)介绍

变分自编码器&#xff08;VAE&#xff09;介绍 一、前言二、变分自编码器1、VAE的目标2、理论推导3、补充4、重参数技巧 一、前言 变分自编码器&#xff08;Variational Auto-Encoder&#xff0c;VAE&#xff09;是以自编码器结构为基础的深度生成模型。 自编码器&#xff08…

基于SpringBoot+Vue点餐系统设计和实现(源码+LW+部署讲解)

&#x1f339;作者简介&#xff1a;✌全网粉丝10W&#xff0c;前大厂员工&#xff0c;多篇互联网电商推荐系统专利&#xff0c;现有多家创业公司&#xff0c;致力于建站、运营、SEO、网赚等赛道。也是csdn特邀作者、博客专家、Java领域优质创作者&#xff0c;博客之星、掘金/华…

力扣每日一题104:二叉树的最大深度

题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2…

QT5之windowswidget_菜单栏+工具栏_核心控件_浮动窗口_模态对话框_标准对话框/文本对话框

菜单栏工具栏 新建工程基类是QMainWindow 1、 2、 3、 点.pro文件&#xff0c;添加配置 因为之后用到lambda&#xff1b; 在.pro文件添加配置c11 CONFIG c11 #不能加分号 添加头文件 #include <QMenuBar>//菜单栏的头文件 主窗口代码mainwindow.cpp文件 #include &q…

了解并学会使用反射

目录 一、反射的应用场景&#xff08;简单了解&#xff09; 二、反射的定义 三、关于反射的四个重要的类 四、反射的使用 1.Class获取一个class对象的方式 方式一&#xff1a;forName&#xff08;&#xff09;&#xff1a; 方式二&#xff1a;封装类.Class&#xff1a; …

机器学习第37周周报 GGNN

文章目录 week37 GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 数据处理部分3.2 门控图神经网络3.3 掩码操作 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 传感器设置策略4.3.2 数据集4.3.3 实验设置4.3.4 模型参数设置4.3.5 实验结果 5. 结论 …

uniapp 安卓腾讯buglyapp性能监控原生插件

插件介绍 腾讯Bugly SDK可以帮助你发现多类异常问题&#xff0c;如崩溃&#xff0c;ANR&#xff0c;OOM&#xff0c;内存使用异常&#xff0c;应用操作卡顿&#xff0c;启动耗时过长等质量问题 插件地址 安卓腾讯buglyapp性能监控原生插件 - DCloud 插件市场 使用文档 uni…