草庐IT

flutter-MacOs App2

ChaosHeart 2023-03-28 原文

Flutter 框架

Flutter 是 Google 开发的一套全新的跨平台、开源 UI 框架，支持 iOS、Android 系统开发，并且是未来新操作系统 Fuchsia 的默认开发套件。

Flutter 通过跨平台的 Skia 图形库来实现图形渲染，只依赖各个系统的图形绘制相关的 Api，可能是目前为止真正意义上的全平台 UI 框架。

借助 Feather 平台，我们可以在 MacOS 和 Windows 上运行我们的 Flutter 应用程序，也就是说您可以编写一个可以在所有主要桌面和移动设备上运行的应用程序。

Feather 平台

截屏2022-07-23 16.39.33.png

Feather 是一个在桌面上运行 Flutter 应用程序的平台。

  • 在 Mac 和 Windows 上运行 Flutter 应用程序的编译器和库
  • 一个应用商店，您可以使用它来发布和更新应用，并为用户提供最小的安装阻力
  • 一组可选的扩展 Flutter UI 小部件，用于高级界面设计
  • 目前处于 alpha 测试阶段
  • 免费使用的商业执照

官网：feather-apps.com

配置环境

进入官网，点击 Build an App Now 下载 Mac 端编译器。

截屏2022-07-23 16.38.55.png

下载完成后打开 Feature Workbench，这里就有了墙的存在，非精品网可能要自行处理一下。

截屏2022-07-23 16.39.09.png

Google 账户登录后，可以看到工程列表，如果你第一次做，当然是空的。

截屏2022-07-23 16.40.23.png

项目改造

我们这里新建一个项目为例，教大家怎么把 Flutter 项目运行到 MacOS 上，非常简单哦。

1.打开终端，新建一个 Flutter 项目

flutter create mac_app

2.打开 mac_app 项目中 main.dart 修改两处：

1）在代码顶部引入 foundation 架包

import 'package:flutter/foundation.dart';

2）改造 void main() 函数，增加平台覆盖

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.iOS;
  runApp(MyApp());
}

保存代码，就可以了。

新建 Feather 项目

点击 Feature Workbench 界面右下角的加号，进入新建页面，点击 BROWSE 找到 Flutter 项目工程。

截屏2022-07-23 16.40.36.png

设置应用名和图标就创建完成了。

截屏2022-07-23 16.40.49.png

点击 TEST 会打开 Xcode， command + r 运行就会看到 Flutter 的官方示例运行在 MacOS 上了。

截屏2022-07-23 16.41.01.png

Flutter 右上角的 DEBUG 是环境标记，不想看见它，切换生产环境它就不见了

发布和使用

点击 PUBLISH 设置应用描述和截图，发布应用到 Feather 商店。

截屏2022-07-23 16.41.11.png

发布完成后再次进入项目列表，就可以看到 WEB 选项，点击就会进入 Feather 应用商店的网站。

截屏2022-07-23 16.41.20.png

任何 Mac 电脑都可以通过这个链接(feather-apps.com/alpha/app.h…)来访问和安装这个应用。

截屏2022-07-23 16.41.33.png

更新

和发布流程一样，只是需要注意修改版本号、应用描述和截图，最后上传应用即可。

截屏2022-07-23 16.41.44.png

效果演示

上面使用的是 Flutter 官方的示例工程，有朋友表示看起来不过瘾，so 我从网上找了一个看起来很适合做跨平台服务的示例工程，经过改造后我将其运行到了 macOS 系统上。

截屏2022-07-23 16.41.54.png
flutter-MacOsfluttersectionimagesupload

有关flutter-MacOs App2的更多相关文章

  1. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  2. flutter 中最详细的继承，多态，接口讲解 - 2

    flutter中最详细的继承，多态，接口讲解前言一、继承（Extends）二、混合mixins（with）2.1、最简单的mixin2.2、on关键字，基于某个类型的mixin2.3、多个mixin2.4、mixin怎么实现多继承三、接口的实现（implement）总结前言众所周知，dart是一门单继承的语言，但是我们在日常开发中，会遇到各种各样的问题，比如，我们需要在dart中实现多继承，那么改怎么办呢？本篇文章，我将和大家聊聊关于dart中的继承，接口，混合的相关知识。类型解决什么问题使用场景限制extends子类继承子类继承父类只能继承一个父类，会继承父类的可见的属性和方法，不能继承构造

  3. Flutter实现文件上传华为对象存储(OBS) - 2

      本文主要讲述在Flutter项目中如何实现将文件上传到华为OBS（对象存储）中，并封装为三方库方便灵活使用。背景介绍  在大多项目中都会存在文件上传的需求，之前的实现都是调用后台的文件上传接口将文件上传到服务器上，但是这样会存在一个问题，因为文件上传会占用带宽导致在文件上传中调用其他接口的时候就会存在访问慢的情况，解决方案当然是升级带宽或者单独使用一台服务器作为文件服务，而且要带宽足够大不然上传下载的时候会很慢，但是这样两种方案成本都比较高。随着云计算的到来，各大云服务商都提供了对象存储的服务，费用便宜、带宽高、不影响业务系统而且提供了很多附加功能，比如图片处理、图片鉴黄等功能。  因目前

  4. Flutter项目 - 2

    一、项目简介本节的学习目标是通过Flutter技术，实现仿拉勾教育App的效果。其主要的UI效果如下:二、初始化项目初始化项目fluttercreateflutter_project修改文件flutter项目/android/build.gradle，把google()和jcenter()这两行去掉。改为阿里的镜像地址。//google()//jcenter()maven{url'https://maven.aliyun.com/repository/google'}maven{url'https://maven.aliyun.com/repository/jcenter'}maven{url

  5. 在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理 - 2

    大家好，我是17。FlutterWebView一共写了四篇文章在Flutter中使用webview_flutter4.0|js交互FlutterWebView性能优化，让h5像原生页面一样优秀，已入选掘金一周2023.02.22期FlutterWebView如何与h5同步登录状态已入选CSDN每天值得看–2023-02-21在Flutter中使用webview_flutter4.0|基础用法与事件处理本文是第4篇，定位是新手入门，介绍和演示webview的基础用法。最后还介绍了事件处理的技巧。因为是补写的，所以本来应该首发的却发在最后了。环境准备已经在在Flutter中使用webview_fl

  6. 在flutter中使用NFC（超全） - 2

    文章前景：目前公司主要的业务方向是sass平台，我们的admin系统是基于qiankun搭建的主基座和子模块，app是flutter+h5。我主要负责的是1、qiankun基座的搭建2、flutter基座和通信jsbridge的搭建3、app内h5的书写4、模块开发规范的书写5、…在完善通信jsbridge时，发现有模块需要是需要基于nfc实现的，所以我需要完善ios与android的nfc功能在pub上看到nfc_manager反馈还不错，调查了一下，基本需求可以达到。在此，总结一下几个关键点，希望可以帮助到更多的小伙伴。一、加入插件首先，我们需要在yaml文件加入该pubdependenc

  7. Flutter局部刷新解决闪烁问题 - 2

    在开发Flutter倒计时，setState刷新会造成页面的闪烁，如图一、setState全局刷新1、setState页面问题分析在flutter中常用的刷新方法有setState，然后这个会造成整个页面刷新，特别是绘制需要时间的组件会闪烁.2、setState页面源码login_demo_page.dartimport'dart:async';import'dart:collection';import'dart:convert';import'package:flutter/material.dart';classLoginDemoPageextendsStatefulWidget{Log

  8. Android集成高德Flutter地图（三）定位 - 2

    一、集成高德地图我的项目是需要显示地图的，所以定位是在地图的基础上实现的，当然定位也可以单独实现，获取到位置相关各种信息二、集成高德定位①、集成定位基础SDK在Flutter项目中Android文件夹下的build.gradle添加implementation('com.amap.api:location:6.1.0')注意兼容性处理我这里集成的是Flutter3.0插件所以配置build.gradle为：dependencies{//高德地图Flutter插件内不包含基础SDK包，使用时请参考官网关于集成Android地图SDK和iOS地图SDK说明配置地图SDK//高德地图Flutter插

  9. Flutter高仿微信-项目实践59篇 - 2

    Flutter高仿微信(支持Android和IOS系统)Flutter高仿微信主要包含5大模块：1、Web服务器2、Flutter客户端3、Xmpp即时通讯服务器4、视频通话服务器5、腾讯云服务器另外也有Kotlin版本高仿微信功能，Kotlin版本跟Flutter同时开发，调用的是同一个服务器接口。Flutter高仿微信目录Flutter高仿微信-第1篇-注册Flutter高仿微信-第2篇-登录Flutter高仿微信-第3篇-主页Flutter高仿微信-第4篇-主页-消息Flutter高仿微信-第5篇-主页-通讯录Flutter高仿微信-第6篇-主页-我的Flutter高仿微信-第7篇-个人

  10. 22、 Flutter Widgets 之 NestedScrollView 组件。 - 2

    Flutter中常用的滑动布局ScrollView有SingleChildScrollView、NestedScrollView、CustomScrollView。SingleChildScrollView用来处理简单可滑动的页面布局视图，如一般的数据详情页面，当内容足够多时，一屏显示不下时，就需要滑动处理。NestedScrollView滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到NestedScrollView与SliverAppBar的结合使用。CustomScrollView用来处理更为复杂的布局结合SliverAppBar，S

随机推荐