flutter-actual-combat

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: [], ), ); } } 🟢 运行项目, 可以看到白白的一片, 啥也没有:

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.

在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, ), ], ), ) 替换为:

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.

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 数据存储 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