flutter

Flame 屏幕手柄/摇杆

Wednesday, May 20, 2020

可以看到, 目前最主流的手机游戏都使用屏上手柄/摇杆进行控制, 比如: [caption id=“attachment_1286” align=“aligncenter” width=“700”] League of Legends Mobile (英雄联盟手游)[/caption] [caption id=“attachment_1284” align=“aligncenter” width=“700”] PUBG Mobile (和平精英)[/caption] [caption id=“attachment_1288” align=“aligncenter” width=“700”] Minecraft PE(我的世界手机版)[/caption] 以上游戏都在当前手游榜(2020.04)排名前五. [epcl_box type=“information”]看得出来, 目前的核心玩法、操作交互都离不开手柄/摇杆![/epcl_box] 所以, 本篇文章就来教大家在使用Flame框架时, 在屏幕上展示摇杆, 并控制某些component! 我们要做的项目名称为Lame Tank 360(Lame坦克360). 本项目将完整支持360°的旋转. 并将坦克的"炮塔"与"坦克身体"分开. 因此, 我们必须建立两个摇杆. 需具备的条件 若想顺利学习本篇教程, 你需要具备: 掌握Flutter的基础用法. 已完整学习Flame系列教程. [epcl_box type=“notice”]如果你没有满足上述条件, 你将无法顺利完成这篇教程. 建议先阅读《Flutter游戏开发-Flame教程》 ![/epcl_box] 开始 创建Flutter项目 flutter create lame_tank_360 [epcl_box type=“information”]阿航的教程, 只要涉及到创建项目、命名的相关操作, 身为读者的你可以用阿航教程提供的, 你也可以自己起名! 别忘了替换代码中牵扯的名称为你自己的![/epcl_box] 初始化项目设置 现在项目是可以运行的, 但是只是Flutter默认生成的 清空./lib/main.dart, 并添加以下内容: import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; Future main() async { WidgetsFlutterBinding.

项目速度显著提高! Flutter官方宣布增加Adobe XD的支持!

Tuesday, May 19, 2020

Flutter作为近两年年来的新型APP开发语言, 其受欢迎程度甚至和React Native不相上下. 最近, Flutter发表了一篇振奋人心的文章, 那就是新增了对Adobe XD的支持. Sketch和Adobe XD 如果你涉足过设计领域, 那么一定知道两个设计工具, 分别是Sketch以及Adobe XD. 大多数互联网公司的设计稿输出, 都是靠它们来进行. 当然, Sketch有着一个比较致命的限制, 那就是目前并不支持Windows系统. 作为设计师, 你应该碰到过将设计稿交给开发人员后, 做出的效果差强人意. 即使开发人员保证了所有的位置、距离、长度均准确无误, 但是你却怎么看怎么别扭😥😥. 令人头大的position、px 作为前端开发人员, 你一定为这个问题头疼了无数次——布局! 没错, 你明明完全按照设计师给出的设计稿上标注的尺寸去做了, 但是效果就是不咋地! 要做出类似的效果, 你还要慢慢的调整! 累! 是时候解决双方的苦恼了 终于, 在2020年5月13日, Flutter官方宣布了Adobe XD对其的支持, 那么, 到底有何变化呢? 从Adobe XD导出Flutter代码 使用XD可以在几分钟内导出Flutter代码. 你可以导出单个图形, 也可以导出整张画板! 你不需要将设计稿转化为一个又一个的区块了! 直接微调就可以了! 减少浪费时间的布局调整 最让人头疼的就是数字了, 上面的生成代码, 同样会生成布局所需的各种数值! 原文译文 上面只列出了重点功能, 阿航给大家翻译了原文: Flutter的目标是为创意表达提供丰富的画布。借助iOS和Android上的硬件性能，对屏幕上渲染的每个像素的完全控制以及通过有状态的热重载进行快速迭代的能力，我们希望释放设计师和开发人员的潜力，建立不受人为技术边界限制的舒适体验. 去年在Flutter Interact活动上 ，我们将焦点放在使用Flutter进行探索和实验的创作者身上。我们听到了像Robert Felker 这样的数字艺术家的声音，他们使用Flutter通过生成算法构建空灵形式。我们介绍了gskinner之类的创意机构的工作 ，他们创建了一系列创新的短片来展示Flutter的潜力。我们还看到了Adobe的演示，该演示是Adobe XD插件 的早期原型，该插件 直接从其工具中导出Flutter代码。 (Flutter是用于创意表达的丰富画布：这是一种不受传统技术界限限制的美丽原生体验的工具包。（由Flutter制作的生成艺术品，由Robert Felker提供。)) 今天，我们很高兴与Adobe一起宣布他们的XD to Flutter插件<strong>现在可以作为</strong> 更广泛的公共测试的<strong>初步试用</strong> 。Adobe XD 是一个UI / UX设计和协作工具，可帮助团队为网站，应用程序，语音界面，游戏等创建和共享设计。XD 是Adobe同类领先的Creative Cloud的一部分 ，它使设计师可以将矢量艺术，文本，图像，微交互和动画转换为行为类似的工作软件产品的交互式原型。将设计导出到Flutter的能力进一步减少了创意与产品开发之间的等待时间，因为XD原型现在可以在数分钟内成为Flutter代码。Adobe XD支持Windows或macOS上的设计，并包括免费的入门计划 ，可助您启动并运行。

修改Flutter的APP图标、启动器图标

Thursday, May 14, 2020

在APP上线前, 我们肯定需要修改APP的启动图标. APP图标代表了它的品牌, 增加了辨识度. 让用户可以在手机的APP列表内快速找到你的APP. 所以本篇博客将记录修改Flutter 的APP图标/启动器图标的全过程. Android图标 查看初始图标 打开目录./android/app/src/main/res, 你会发现有如下几个目录: mipmap-hdpi mipmap-mdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 如图: 当你打开每个文件, 会发现每个图标都是这张初始图片: 图标尺寸规范 我们需要准备以下图片: 对应目录 尺寸 mipmap-mdpi 48×48 mipmap-hdpi 72×72 mipmap-xhdpi 96×96 mipmap-xxhdpi 144×144 mipmap-xxxhdpi 192×192 图标命名规范 它们的文件名通通是ic_launcher.png! 图标目录结构 目录结构: ./android/app/src/main/res/mipmap-mdpi/ic_launcher.png ./android/app/src/main/res/mipmap-hdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xhdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png ./android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png 替换完成后, 重新运行你的Flutter项目. 看看你的调试设备的APP启动图标, 你应该就可以看到修改的结果了! 感谢 Pexels 上的 Pixabay 拍摄的照片 结语 如果你对本篇文章有任何问题, 欢迎在下方评论区, 进行讨论, 或加入阿航的技术小站交流群 欢迎访问阿航的技术小站 官网, 获取更多技术干货!

在Flutter中使用16进制颜色

Wednesday, May 13, 2020

使用16进制表示颜色是较为主流的方式, 那么在本篇文章中将简单讲讲如何在Flutter中使用16进制颜色. 方法一: 使用原生方法 Flutter中, Color类仅接收整数作为参数. 你也可以使用fromARGB或者fromRGBO. 比如拿到了一个16进制颜色#b74093. 因为Color还需要传入透明度, 255就是最大值(也就是不透明), 转为16进制就是0xFF, 所以我们只需这样表示: const color = Color(0xffb74093); 正规一点的写法(可选, 因为大小写不敏感): const color = Color(0xFFB74093); 方法二: 接收字符串格式, 转为Color 创建一个HexColor类: class HexColor extends Color { static int _getColorFromHex(String hexColor) { hexColor = hexColor.toUpperCase().replaceAll("#", ""); if (hexColor.length == 6) { hexColor = "FF" + hexColor; } return int.parse(hexColor, radix: 16); } HexColor(final String hexColor) : super(_getColorFromHex(hexColor)); } 然后进行调用: Color color1 = HexColor("b74093"); Color color2 = HexColor("#b74093"); Color color3 = HexColor("#88b74093"); 感谢 How do I use hexadecimal color strings in Flutter?

移除Flutter右上角的DEBUG标识

Tuesday, May 12, 2020

在使用Flutter进行开发时, 右上角会出现一个DEBUG的标识. 测试的时候倒是无所谓, 但是APP上线前肯定要将其去掉. 证明其是一个开发完成的、完整的APP. 这篇非常简短的博客将会记录如何去掉Flutter右上角的DEBUG标识. 一共有两种方式, 你可以按需来选择! 自动移除 别担心, 你在为Flutter打正式包的时候, 这个标志将会自动消失. 但有的时候我们想在开发过程中直接去掉, 那么你会需要下面的手动移除. 方法一: 代码修改 找到你的MaterialApp(建议直接使用关键字进行全局搜索), 为其添加一个属性即可去掉: MaterialApp( debugShowCheckedModeBanner: false, // ... 其他配置 ) 如图: 方法二: Android Studio修改 如果你用的是Android Studio, 那么你可以不修改代码, 通过鼠标来移除: 第一步: 点击界面右侧侧边栏的Flutter Inspector, 如图: 第二步: 点击弹出界面的"More Actions"的下拉选(这个按钮字比较小, 比较隐蔽): 第三步: 点击下拉选项的"Hide Debug Mode Banner": 搞定! 感谢 Pexels 上的 Jaymantri 拍摄的照片 How to remove debug banner in flutter on android emulator? - Stack Overflow (排名不分先后) 结语 两种方式都可以进行修改, 唯一的区别就是方法一影响代码, 方法二不会变动代码. 你可以按实际情况选择你需要的方式!

Dart 中的 Null-aware (null感知运算符)

Saturday, May 9, 2020

来到这篇文章, 说明你一定想在 Dart 的语法上更进一步(不出意外的话, 你在学 Flutter 🤭🤭). 工欲善其事, 必先利其器. 一个优秀的程序员应该掌握可以节省代码量的高级语法, 不论是节约时间还是提升水平. 本篇文章就来讲讲Dart语言中的 Null-aware ( null感知运算符 )吧! 背景 Dart的Null-aware来自于Dart 1.12正式版本: 你也可以看看官网版本介绍 用途 存在即是合理. 既然有这样的新运算符, 说明它在一定程度上节省了我们的代码, 使代码更加简洁. 既然它被称为Null-aware, 说明这个运算符是专门用于处理null值的. 将会提供空指针的相关操作. 创建示例对象 我们来创建一个Person对象, 方便后续使用: class Person{ // 性别 String gender; // 变更性别为女性 void changeToFemale(){ gender = "女性"; } } Person person = Person(); ?? 当前者为null时, 返回后者. exp ?? anotherExp 实例: 获取用户性别 当某个Person对象的gender(性别)属性为null时, 返回’未知': 方法一: 基础IF语句 我们可以用最基础的语句来写: String gender; if(person.gender!=null){ gender = person.gender; }else{ gender = '未知'; } 方法二: 三目运算 三目运算符相当好用:

Flutter 清理编译缓存

Thursday, Apr 23, 2020

在使用Flutter进行开发时, 经常会产生很多的编译缓存文件, 比如: 这样可以加快下次的编译速度. 但有时会出现一些我们神奇的报错, 很有可能是缓存不兼容所造成的! 有时出现的无解bug, 重启一下IDE或模拟器, 清理一下缓存就会被解决… 别问, 问就是阿航踩过好几次坑😢😢😢😢 这一篇就会讲如何清理flutter的编译缓存. (不是APP的数据缓存, 别弄混!) 方法一: IDE自带清理按钮 这里拿官方推荐的Android Studio举例: 方法二: 使用命令行清理 使用终端(cmd)进入项目目录. 输入清理命令: flutter clean 清理完成 清理完成后, 可以看到之前的.dart_tool以及build目录被清理干净, 下次编译会从0开始. 也可能顺便解决你的一些未知bug😜 结语 本篇文章来自阿航的技术小站 对文章有任何问题, 欢迎在下方评论区进行讨论. 阿航会尽力回复.

Flutter 国际化: 多语言处理(Easy localization)

Wednesday, Apr 22, 2020

语言不互通是困扰了人类几千年的大难题🤐. 许多国外优秀的文学作品、 APP因为没有进行多国语言的处理, 导致发展缓慢甚至停滞. 虽然现在的各大翻译软件已经非常强大了. 但是想象一下: 一个用户一边拿着翻译机一边使用某个软件. 这样恐怕会逼疯用户, 可能会很快的放弃😭😭. 如果你的APP有相当一部分用户是来自全球各地, 那么对APP的国际化就是刚需💪. 对APP的国际化可以直线提升外国友人用户体验, 顺便会提高你的APP的"逼格", 用最简单的方式给用户一种"你们的APP很大很强"的感觉😏😏😏. 最终效果 老规矩, 有图有真相. 先来看看我们最终会实现的效果: 需求 在做一个事情之前, 我们先来简单的规划一下, 我们的目标是什么, 我们要怎么做: 提供多种语言处理, 对每部分文本进行单独的翻译. 用户可以随时切换语言 开始 第一步: 创建Flutter APP 这一步不再赘述, 相当基础的东西啦! 第二步: 清理项目 删除测试目录 删除./lib/test目录, 因为我们暂时用不上. 清理main.dart 因为新的Flutter项目中的main会给我们很多用不上的代码, 所以进行替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter 国际化: 多语言处理', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Hi, 国际化!

Flutter 游戏开发(flame) 05 收尾和打包(5/5)

Sunday, Apr 19, 2020

完成一个项目是世界上最爽的感觉之一. 你呕心沥血的做某件事, 最终想法变成了现实. 最后, 欢迎来到本系列的终章. 当然, 只有你一步一步跟随阿航的教程, 终章才有意义. 如果你还没有看过之前的章节, 还请你循序渐进, “一章一个脚印”! 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 本章 需具备的条件 本系列教程之前的全部要求👈 更多的资源包 – 本教程提供了资源包, 但你也可以使用自己的. 推荐资源网站Open Game Art . 我们将使用与前一部分相同的编码规范👩‍🏫 最终的资源包 这个最后的资源仅有一个图像, 但是它有5种不同的尺寸. 当游戏安装在设备上时, 图像将作为玩家APP目录的启动图标. <img src="images/01-1.jpg" alt=""> 点击图片或者此链接下载资源包! 🔴 注意: 如果你遵循本教程, 则可以使用上述资源包. 本资源包是Github上Langaw(原作者) 项目的一部分, 该项目获得CC-BY-NC-ND许可证的许可. 这意味着您可以共享、复制或者重新分发资源. 你必须在感谢中提到, 提供许可证的链接, 并标明你是否进行了更改. 你不得将资源用于商业目的. 如果混合, 转换或者构建资源, 则不能分发修改后的资源.

Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5)

Friday, Apr 17, 2020

引言 曾想过开发一款自己的电子游戏吗? 来对地方了. 本系列教程就是教你如何开发一个属于自己的2D休闲游戏. 本教程是第一章 的延续, 是针对任何水平的指南. 在这一章我们将会做一个"打鸟"类型的游戏. 这个游戏起名为"Langaw", 翻译过来就是"小飞蝇". 玩家的任务就是在小飞蝇到达垃圾堆前尽可能的多消灭小飞蝇(阿航在这里不得不吐槽下原作者, 我们为啥要保护垃圾啊真是的😒). 玩家只需要在屏幕上简单的点击就可实现击杀的效果(别用榔头砸手机🤣).这一章中, 我们暂时不会渲染图片, 所以暂时将小飞蝇展示为绿色方块, 当击中小飞蝇后, 变为红色方块并坠落至屏幕底部. 你可以在文章底部查看效果视频. 下面是我们本系列教程的文章目录: Flutter 游戏开发(flame) Flame介绍 Flutter 游戏开发(flame) 01 开发2D休闲游戏：消灭小飞蝇(1/5) 本章 Flutter 游戏开发(flame) 02 图形和动画(2/5) Flutter 游戏开发(flame) 03 界面和弹窗(3/5) Flutter 游戏开发(flame) 04 分数, 存档和音效(4/5) Flutter 游戏开发(flame) 05 收尾和打包(5/5) 需具备的条件 如果你完整的学习了第一章 , 那么你应该已经准备好进行开发了🤩. 以防万一, 在这里重复一下: 本文将假设您已是一名有一定经验的开发人员, 且拥有了"程序员思维". 如果你是小白, 没关系! 本篇教程非常入门. 只要兴趣足够, 你也将成为一名"游戏开发者"✌✌. 你也需要一个配置足够的电脑, 可以运行IDE、编译并运行Android模拟器. 如果你的电脑配置不够高, 你也可以直接连接Android手机, 在真机上运行和调试. Flutter可以同时构建Android和IOS APP. 本文将围绕Android进行开发. 开发完成后, 你可以运行不同的build, 使你也可以在IOS上玩游戏. 要顺利阅读本文, 假定您已经具备以下条件👇: