flutter

Flutter 实现毛玻璃/磨砂效果

Monday, Jun 8, 2020

还记得之前风靡一时的Windows 7的毛玻璃效果吗? 虽然过去了好多年, 但毛玻璃效果一直没有过时👨‍🎓. 本篇文章就来记录下如何使用Flutter实现毛玻璃/磨砂效果. 效果 有图有真相, 先来看下我们要实现的最终效果: 环境&需具备的条件 本篇文章的开发环境: 若想顺利阅读本篇教程, 你需要具备: 计算机已安装Flutter开发环境 掌握Flutter基础 实战开始 创建项目, 清理代码 先来创建一个空项目, 直接用IDE创建或在终端中输入: flutter create my_frosted 删除./test目录. 并替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Frosted Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFrosted(), ); } } class MyFrosted extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [], ), ); } } 🟢 运行项目, 可以看到白白的一片, 啥也没有:

Default value of an optional parameter must be constant

Tuesday, Jun 2, 2020

今天阿航在使用Flutter进行开发时, 希望为final修饰的实例变量提供默认值. 尝试过程中IDE报错: Default values of an optional parameter must be constant. 本篇文章就来记录下碰到这种问题该如何解决! 错误示例 [epcl_box type=“information”]因为阿航出错的源码并不便于演示, 所以这里采用Stack Overflow上的简单示范, 使大家更直观的解决问题.[/epcl_box] 先来看下错误源码: enum MyEnum { a, b } class ClassA { final MyEnum myEnum; ClassA({this.myEnum = MyEnum.a}); } class ClassB { final ClassA classA; ClassB({this.classA = ClassA()}); // ClassA 报错 } 乍一看似乎没有什么问题, 但是实际上Dart并不允许这种写法. 解决方案 其实解决方案很简单, 来看下修改后的代码(注意高亮的行): enum MyEnum { a, b } class ClassA { final MyEnum myEnum; const ClassA({this.myEnum = MyEnum.a}); } class ClassB { final ClassA classA; ClassB({this.

Flutter Clipboard 剪贴板操作: 复制到剪贴板 / 从剪贴板中获取

Saturday, May 30, 2020

我们在使用Flutter进行开发时, 有时会使用类似"复制本段文字"的功能. 为了提升用户体验, 我们不希望用户长按文字, 再自行复制, 我们希望提供一个按钮直接点击复制, 甚至自动复制! 反之从剪贴板获取也一样. 效果 有图有真相, 不说废话, 直接展示最终效果: 复制到剪贴板 从剪贴板获取(粘贴) [epcl_box type=“information”]如果你了解阿航的技术小站, 应该会知悉每篇文章都会提供相当详细且完整的源码. [/epcl_box] 应用场景 复制到剪贴板 生成了运单号, 需要用户进行保存; 某些微商APP需要复制文案, 发布朋友圈; 文学类APP中, 发现一段非常好的句子, 想发给好友. 从剪贴板中获取 直接填入用户复制的短信验证码. 淘宝分享的东西, 复制后打开淘宝APP. [epcl_box type=“information”]当然, 以上只是举了几种例子, 还有更多可以提升用户操作体验的实例在此不过多举例了, 直接开始.[/epcl_box] 实战开始 初始化Flutter项目 创建Flutter项目, 清理一下./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: 'Flutter剪贴板操作'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.

Scaffold.of() called with a context that does not contain a Scaffold

Friday, May 29, 2020

今天阿航在研究底部弹出提示showSnackBar()组件时碰到了这个报错: Scaffold.of() called with a context that does not contain a Scaffold. 本篇文章就来记录下这种报错该如何解决! 问题原因 完整报错日志: ════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════ The following assertion was thrown while handling a gesture: Scaffold.of() called with a context that does not contain a Scaffold. No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This usually happens when the context provided is from the same StatefulWidget as that whose build function actually creates the Scaffold widget being sought.

在Flutter中设置背景图片 / background image

Wednesday, May 27, 2020

有时我们需要给APP的某个页面或某个widget添加背景图. 本篇文章就来记录下如何在Flutter中设置背景图片. 效果 有图有真相, 先来看下我们本篇博客将实现的最终效果: 速度快的同学直接看下面的核心代码! 实战开始 创建Flutter项目 创建一个新的Flutter项目, 运行查看一下: 空白的, 啥也木有. 添加图片资源 这里为大家提供一个好看的背景图: Pexels 上的 Emre Can 拍摄的照片 下载此图片, 重命名为background.jpg. 我们来将其添加至Flutter项目中. 创建资源目录 创建目录./assets/images, 将上面的图片放到该目录下: 引入pubspec.yaml 进入pubspec.yaml, 将背景图片资源文件路径assets/images/background.jpg进行导入: flutter: uses-material-design: true assets: - assets/images/background.jpg [epcl_box type=“notice”]这里一定要注意缩进, 若格式有误将会出错![/epcl_box] 进行package get或在终端中输入: flutter packages get 展示背景图 回到./lib/main.dart, 进行代码替换: 找到: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ) 替换为:

Waiting for another flutter command to release the startup lock...

Tuesday, May 26, 2020

又是开发APP的一天, 但是在执行Flutter命令时, 终端中返回: Waiting for another flutter command to release the startup lock… 字面意思是: 正在等待另一个正在执行的Flutter命令完成… 本篇文章就来记录一下如何如何解决这种问题. 出现原因 非常明显, 它告诉了我们已经有另一个Flutter命令正在执行! 一方面因为国内网络的原因, 有些命令执行相当慢. 导致可能很久之前执行的命令到现在也没完成. 亦或者是Flutter自己在后台执行了一些命令. 解决方案 所以, 要解决这个问题, 我们的目标就确定了. 那就是关闭掉当前执行的Flutter命令进程! 这里阿航给大家提供了若干方法, 大家可以按需选择. 方法一: 安全地等待执行结束 这个是最省心, 也是最安全的方式. 因为强行停止某个进程可能会出现各种异常, 甚至会导致需要重新安装Flutter… 如果真变成这样就糟透了😭😭😭 当然, 有时我们不想等, 那么就需要下面的方法了. 方法二: taskkill 打开Flutter安装目录, 复制dart.exe的路径(一般会在flutter安装目录\bin\cache\dart-sdk\bin). 打开Powershell或CMD. 若盘符不一致, 需要先切换盘符, 比如当前在C盘, 切换至D盘: D: CD进入刚才复制的路径: cd flutter安装目录\bin\cache\dart-sdk\bin 使用taskkill关闭进程: taskkill /F /IM dart.exe 如果返回类似这样的信息即是成功: taskkill /F /IM dart.exe 成功: 已终止进程 "dart.exe"，其 PID 为 9804。 [epcl_box type=“success”]这是目前最便捷的强行关闭方式!

Flutter获取包名、APP名称、版本号、build构建版本号

Monday, May 25, 2020

在进行APP版本迭代的过程中, 有时我们需要通过获取当前APP的版本号, 与后端服务器获取的当前最新版本进行比对, 如果出现了最新版本, 我们提醒用户进行应用更新. 本篇文章就来记录一下Flutter获取包名、应用APP名称、版本号、build构建版本号. 最终效果 有图有真相, 先来看下最终效果吧! 应用场景 通过检查当前APP版本号来判断是否需要更新. APP出现错误日志需要传回服务器时, 获取APP基本信息(也就是看看bug出现在哪个版本!). 实战开始 引入PackageInfo 老样子, 上官方的存储库中寻找我们今天需要的PackageInfo: [epcl_box type=“information”]一般我们选用第三方库会看三个指标: 评分、兼容性以及活跃度.[/epcl_box] 这个库将会成为我们获取APP信息的主力. 进入./pubspec.yaml, 导入: dependencies: package_info: ^0.4.0+18 一定要注意缩进哦! 初始化项目 为了让大家更直观的看到, 这里提供./lib/main.dart的代码, 你可以直接进行复制并运行: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '获取设备信息Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: '获取设备信息'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

Flutter 修改包名 package name

Friday, May 22, 2020

通常使用flutter create命令创建新的flutter项目时, 包名是默认的com.example(或类似的包名). 很明显在开发一个属于自己的项目时, 这样是不对的. 需要将包名改为自己的或者所在公司的域名反写. 本篇文章就来写下如何修改Flutter的package name (包名). 方法一: 创建项目时指定包名 如果你还未创建项目, 或者已有项目代码量较少, 可以通过此命令来创建项目: flutter create --org 你的域名反写 项目名称 比如: flutter create --org com.bugcatt langaw 当然, 如果你的项目已经成型, 不便于迁移, 那么请考虑下面的方法. 方法二: 代码内修改 修改build.gradle(android) 打开./android/app/build.gradle, 找到类似这样的: defaultConfig { // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). applicationId "com.bugcatt.flutter_app_desktop" minSdkVersion 16 targetSdkVersion 28 versionCode flutterVersionCode.toInteger() versionName flutterVersionName } 修改其中的applicationId为你自己的. [epcl_box type=“information”]有些同学可能已经注意到了, defaultConfig中已经给出了一个"TODO"让我们处理![/epcl_box] 修改Info.plist(IOS) 打开./ios/Runner.xcodeproj, 搜索关键字PRODUCT_BUNDLE_IDENTIFIER. 修改所有的: PRODUCT_BUNDLE_IDENTIFIER = 包名; [epcl_box type=“notice”]分号什么的别忘记哦![/epcl_box] 修改AppInfo.xcconfig(MacOS) 如果你同样开启了MacOS的桌面应用开发, 则需要本步骤!

Flutter Toast、弹出提示、轻提示

Thursday, May 21, 2020

主流的三种APP反馈形式: toast、snackbar以及dialog. toast又称为弹出提示、轻提示.通常用于提示用户一些不那么重要的信息, 会弹出并显示文字一段时间. 时间一到就会消失. 相较于snackbar和dialog, 对屏幕的入侵较少. 身为开发人员怎能不掌握toast的基本使用? 这篇文章阿航就带着大家一起探讨一下Flutter中的toast. 效果 有图有真相, 我们来看下我们本次要实现的最终效果: 源码地址 👉在Github 或码云 上查看本篇文章全部代码. 搜索fluttertoast [epcl_box type=“information”]有同学会问, 为什么要选择插件, 不选择原生呢… 因为Flutter没有我们所需的这种效果! 只有自带的snackBar![/epcl_box] 老样子, 上pub.dev 寻找我们所需的插件, 在搜索框输入fluttertoast: 看到第一条: 99分, 相当高的评分. 点进去, 查看最新版本发布日期和兼容性: [epcl_box type=“information”]一般我们在选择一款Flutter插件时, 会先看它的评分(Flutter官方评分还是比较严格的). 之后再去看看它的最新日期(如果很久未更新, 可能项目已经停止维护了). 最后再来看看它的兼容性, 是否合乎我们的规则.[/epcl_box] 同时支持Android、IOS以及Web. 兼容性很好. 实战开始 创建项目 创建一个Flutter项目, 先来清理项目. 删除./test目录, 因为我们的这个项目只是一个简单的demo. 不需要测试驱动开发. 通过flutter创建的项目的./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 toast', theme: ThemeData( primarySwatch: Colors.

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.