flutter

项目速度显著提高! 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 踩坑 A package may not list itself as a dependency

Friday, Apr 10, 2020

在使用 Flutter 开发APP时, 运行flutter package get命令, 控制台报了 A package may not list itself as a dependency 的错误. 问题展示 运行flutter package get, 控制台报错如下: Because my_app depends on my_app which doesn't exist (could not find package my_app at http://pub.dartlang.org), version solving failed. pub get failed (1; could not find package my_app at http://pub.dartlang.org) exit code 1 A package may not list itself as a dependency 原因 检查你的Flutter项目, 是否与即将导入的第三方库重名. 解决方案 方案一: 修改项目名 (推荐) 修改你的项目名称.

Flutter 数据存储 SharedPreferences

Thursday, Apr 9, 2020

我们在做APP开发时, 经常会涉及到用户的 数据存储(比如保存用户登录token、用户的某些偏好设置等). 开发过Android的朋友应该知道有 SharedPreferences. 在 Flutter 中, 同样为我们提供了十分相似的(甚至名字都一样)组件, 为我们提供数据存储的能力. 本篇教程将用一个简单的小Demo, 让你完全掌握 数据存储之SharedPreferences 的用法. 若图片展示异常, 请访问我的官方博客 效果 有图有真相, 我们先来看一下我们最终的效果: SharedPreferences最终效果 仓库地址 所有源码(含注释)均已上传至开源仓库: Github 码云 准备工作 开发环境 本博客的环境一览: 环境 版本号 Flutter 1.14.6 beta Dart 2.8.0-dev.5.0 Android Studio 3.5.2 注意您的环境和文中的差异, 避免出现不兼容的情况哦! 需具备的条件 要顺利阅读本文, 假定您已经具备以下条件: 一台电脑(能同时运行IDE、APP模拟器). Android Studio 或 VSCode(或任何你喜欢的代码编辑器). Flutter开发环境. 您掌握了Flutter的开发基础(至少了解目录结构、Dart语言基本知识). 实战开始 创建Flutter项目 创建一个新的Flutter项目, 命名为my_shared_preferences_demo(您可以随意起名, 但是在下面也要替换名字为您自己的). 注意: Flutter项目名不要和引入的某个第三方库重名, 否则会报: A package may not list itself as a dependency 详见这里 代码截图: 初始化项目 清理代码 因为我们的项目过于简单, 暂时不需要进行测试.

Flutter 底部导航栏 / BottomNavigationBar

Tuesday, Apr 7, 2020

几乎99%的应用类APP都需要一个底部导航栏. 这篇教程为 Flutter 语言中, 如何写一个主流的 底部导航栏 . 并使用 Flutter 官方提供的 BottomNavigationBar 组件. 几乎每一个APP都拥有一个底部导航栏, 所以这篇教程将会十分有用🤭 效果 有图有真相, 我们本次要实现 底部导航栏 的最终效果如下🙊: 底部导航栏最终效果 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 虽然如此普遍, 但我们还是要更直观的看下哪里需要用到底部导航栏, 如下图: 用到底部导航栏的主流APP 可以得知, 最流行的、最主流的APP都需要导航栏 实战开始 创建导航页面 创建lib/main.dart文件, 内容: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Bottom Navigation', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( '底部导航栏演示', ) ), ); } } 这个页面就作为我们的导航页了, 继续.

Flutter 指纹验证/人脸识别

Tuesday, Apr 7, 2020

指纹验证/指纹识别 以及 人脸识别 是我们在平常使用各种APP时常用的功能, 这篇教程将使用第三方库 local_auth 来实现 Flutter 中的指纹验证以及人脸识别. 效果 有图有真相, 我们本次要实现的最终效果如下: 指纹识别图片效果展示 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 这个在支付相关功能中最常见了, 用于二次验证当前操作者是否为本人. 当然, 有时我们保护的不仅是现金. 实战开始 导入第三方库: local_auth 在./lib/pubspec.yaml中导入: dependencies: local_auth: ^0.6.1+3 修改MainActivity 进入./android/app/src/main/***/MainActivity.java或MainActivity.kt,导入依赖: import io.flutter.embedding.android.FlutterFragmentActivity; 修改: class MainActivity: FlutterActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 为: class MainActivity: FlutterFragmentActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 这里主要是修改了FlutterActivity为FlutterFragmentActivity 代码截图1 AndroidManifest.xml增加权限 进入 android/app/src/main/AndroidManifest.xml, 在<manifest>中, 添加: <uses-permission android:name="android.permission.USE_FINGERPRINT"/> 代码截图2