妥善处理Flutter的404 Not Found 未找到错误

Saturday, Jul 4, 2020

Flutter已经支持了Web端, 我们可以使用其创建动态网站了. Flutter能够处理来自Web的错误, 比如404未找到. 但是如何为Flutter应用创建自定义的404页面呢? 本文将介绍如何创建自定义页面, 用于用户在试图搜索不存在的页面时给用户友好提示. 在Flutter中将客户端重定向至自定义404页面 每个人在上网冲浪时都遇到过"404 Not Found"、“页面不存在"等等. Flutter通过自动将你重定向至初始路由来解决此问题(通常是APP首页). 观赏下一些大厂好看的404页面: AirBnb(爱彼迎) 的404页面 Github 的 404页面 Flutter 的 404页面 如果你想拥有一个类似上方精美的404页面该怎么办? Flutter可以轻松做到这一点. 想创建自定义404错误页面, 你的APP需要使用MaterialApp, CupertinoApp或WidgetsApp小部件. 大多数APP也是使用它们三个之一. 它是创建Flutter APP时调用的第一个小部件. MaterialApp通过以下顺序搜索路径来配置顶级导航器: 对于/路由, 使用 home 属性(如果不是null). 否则, 若 routes 包含该路由, 则通过其处理. 否则将会调用 onGenerateRoute (如果提供). 对于任何未被 home 和 routes 处理的有效路由, 它应返回非null值. 最后, 若上述均未处理路由, 则会调用 onUnknownRoute . 如果上述的方法均未处理路由, 将使用 onUnknownRoute 来处理. 此函数通常用于异常处理. 比如此函数总是生成一个"404"页面, 该页面描述了未找到的路由. 不存在的404路由可能是APP的bug生成, 也有可能来自外部请求. 下面将演示如何为onUnknownRoute属性定义匿名函数, 该函数使用了一个RouteFactory函数. 它是一个工厂函数, 该函数传入一个RouteSettings函数类型并返回一个Route. 以下代码块将会展示定义onUnknownRoute属性有多简单: `onUnknownRoute: (settings) { return MaterialPageRoute(builder: (_) => PageNotFound()); },` PageNotFound()是一个窗口Widget, 也就是404页面.

Flutter 指定TextField输入框(文本框)初始值(初始文字)

Thursday, Jul 2, 2020

输入框也许是最常用的表单项了. 添加数据时我们直接使用空的输入框就可以了. 编辑的时候, 我们需要把旧的数据预先放在输入框内. 那么如何为其指定初始值呢? 本篇文章就来记录下Flutter如何指定TextField输入框(文本框)初始值(初始文字). 效果 有图有真相, 先来看一下我们的最终效果: [epcl_box type=“information”]老规矩. 速度快的同学直接看下方的核心代码![/epcl_box] 应用场景 编辑数据使用的输入框 输入框提供默认数据 实战开始 方法一: TextField 创建一个dart文件, 内容为以下代码: `import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter 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根据屏幕尺寸(宽度/高度)的百分比设定元素(小部件/组件/Widget)尺寸

Tuesday, Jun 30, 2020

最让前端开发人员头疼的问题之一就是屏幕尺寸兼容性问题了. Web端开发人员经常会对测试人员说: “换个浏览器试一下”.😂 虽然现在的主流的屏幕大小非常相似, 但是我们也要事先处理好. 本篇文章就来记录Flutter如何根据屏幕尺寸(宽度/高度)的百分比设定元素(小部件/组件/Widget)尺寸. 效果 有图有真相, 先来看一下效果: 需具备的条件 你掌握Flutter基础. 你了解基础的Flutter布局. 本篇文章的开发环境: [epcl_box type=“information”]老规矩, 速度快的同学直接看最下方的核心代码![/epcl_box] 实战开始 准备工作 创建一个Flutter项目, 替换main.dart为: `import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter 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<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

三种不同的"空格" Unicode( , ,　)及区别

Saturday, Jun 27, 2020

今天阿航在使用Dart的jsonEncoder做json字符串解析时, 一直报错. 但是使用bejson等网站进行解析时却不会出错. 本篇文章就来记录下问题原因. 以及三种不同的"空格" Unicode(\u00A0,\u0020,\u3000)及区别 三种空格的区别 一张表格来分别解释几种空格: Unicode编码 含义 用途 \u00A0 不间断空格 在Office中比较常见, 使某个单词在结尾处不会被自动换行显示(快捷键Ctrl+Shift+空格) \u0020 半角空格(英文符号) 正常的空格, 点击键盘的空格键就会输入. 在代码中常用 \u3000 全角空格(中文符号) 用处并不多. 可以用于中文的文章.

Flutter 隐藏/显示某widget组件、切换显示状态

Thursday, Jun 25, 2020

在进行Flutter开发时, 我们需要对某个widget进行显示与隐藏状态的切换. 这个需求还是蛮常见的. 本篇文章就来记录下Flutter如何隐藏/显示某widget组件、切换显示状态. 效果 有图有真相, 先来看下我们要实现的最终效果: 隐藏Widget 隐藏且不影响布局 需具备的条件 你已经掌握Flutter基础 本篇文章环境: [epcl_box type=“information”]老规矩, 速度快的同学直接去看核心代码![/epcl_box] 实战开始 准备工作 创建一个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: 'Show Hide widget', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Show & Hide Widget'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { // 存储"是否显示"状态 bool _isShow = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.

WordPress 短代码 shortcode 转义为普通字符串

Tuesday, Jun 23, 2020

在使用WordPress进行创作时, 阿航碰到了需要将短代码转为普通字符展示在文章内. 本篇文章就来记录下如何将WordPress的短代码转义为普通字符串. 效果 将短代码转为普通字符串, 展示在屏幕上的 3 个方案的 2 种效果: [[epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box]] [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 场景 阿航的网站上有这样的提示短代码: [epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box] 在转义前, 我们是这样输入的: [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 很明显, 这样输入会被WordPress自动转为短代码. 需具备的条件 你掌握WordPress的基础使用 本篇文章的环境: 解决方案 方案一: 被"“包裹 此方案非常简单, 只要我们使用<code></code>标签将短代码括住, 代码将被自动转义, HTML写法 (区块编辑器直接找"代码"区块, 输入即可) : <code> [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] 效果: [epcl_box type="information"]这是一条被短代码包住的信息![/epcl_box] [epcl_box type=“success”]顺利搞定![/epcl_box] 方案二: 被”[]“包裹 此方案也相当简单, 我们在短代码外包裹一层”[]". 写法改为: [[epcl_box type="information"][/epcl_box]] 效果: [[epcl_box type=“information”]这是一条被短代码包住的信息![/epcl_box]] [epcl_box type=“success”]搞定! 本方法相当方便![/epcl_box] 方案三: 使用转义字符串 此方法需要我们的重点就是把[和]转为转义字符串. 一张表格查看对应关系: 转义前 转义后 [ &#91; ] &#93; [shortcode] &#91;shortcode&#93; 那么, 我们上述例子的最终写法应为:

IDEA 一键部署 SpringBoot 项目到远程服务器 Docker 内

Sunday, Jun 21, 2020

Docker作为当前较为流行的微服务容器管理工具, 极大的方便了传统运维部署的工作. IDEA作为地表最强Java开发IDE, 自然提供了对Docker服务的支持. 本篇文章就来记录下如何使用IDEA 一键部署 SpringBoot 到远程服务器 Docker 内. 应用场景 先来看下传统的部署流程: 传统开发流程还好, 每个版本的间隔时间较长. 但是对于小型敏捷开发团队, 这个流程就很要命了! 阿航个人的经验, 每个项目从打包到重启Docker服务器, 预计要花费近10~20分钟! 痛不欲生. 需具备的条件 你了解服务器的基本使用. 你掌握Docker/Dockerfile的使用. 你掌握基础的Bash命令. 本篇文章的环境: 实战开始 [epcl_box type=“notice”]本篇教程小步骤较多! 只要稍有疏忽就可能导致失败! 请实践时仔细阅读教程![/epcl_box] 生成CA公钥私钥 进入安装了Docker的远程服务器, 创建目录ca, 用于存储docker ca认证文件: mkdir -p /usr/local/ca 进入该目录中: cd /usr/local/ca 执行以下命令, 生成公钥及私钥. 需要输入你自己的密码. 记住该密码, 下面会多次使用: openssl genrsa -aes256 -out ca-key.pem 4096 执行以下命令, 根据提示分别输入你的信息: openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -out ca.pem 执行以下命令生成key: openssl genrsa -out server-key.pem 4096 执行以下命令, 把$HOST替换为你的远程服务器的IP地址:

Flutter 隐藏/移除导航栏的默认返回按钮

Friday, Jun 19, 2020

在实际项目开发中, 我们在进行页面跳转时, 偶尔会跳到不可返回的页面(比如退出登录后). 本篇文章就来记录下 Flutter 如何隐藏/移除导航栏的默认返回按钮. 效果 有图有真相, 先来看下实际效果: 应用场景 移除导航栏的默认返回按钮适用于: 退出登录后禁止返回 跳转至一个全新的页面, 不可返回 禁止返回的任何页面 需具备的条件 掌握Flutter基础 掌握Flutter页面跳转的基本操作 本篇文章的环境: 环境 版本 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建新文件./lib/main.dart(或者其他你想要的文件名): import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Remove back button', home: FirstPage(), ); } } class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("First Page"), ), body: Center( child: RaisedButton( child: Text("跳转到下一页"), onPressed: () { Navigator.

Stack Overflow 无法访问、访问速度慢的解决方案

Wednesday, Jun 17, 2020

因为大陆对Google进行了封锁, 所以大陆无法访问包含了Google域名的资源文件的页面, 即使能访问也过慢. Stack Overflow作为全球最大的技术问答平台, 无法访问是我们相当大的一个损失. 本篇文章就来记录几种解决方案. 问题原因 打开调试控制台(F12), 访问 https://stackoverflow.com/ . 我们会发现有关Google的请求非常慢, 甚至无法访问. 如: https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 那么找到了原因, 我们就针对此问题进行解决即可! 解决方案 Replace Google CDN FireFox 直接安装插件即可 插件地址 Chrome/Edge等谷歌内核的浏览器: 点击下载插件 , 并解压. 找到其中的chrome目录 打开浏览器, 输入chrome://extensions/ 开启右上角的开发者模式或者Developer Mode: 紧接着点击加载已解压的扩展程序或Load unpacked extension...: 选择刚才下载的插件目录中的chrome目录. 关闭开发者模式. [epcl_box type=“success”]再次访问Stack Overflow, 感受飞一样的速度吧![/epcl_box] 感谢 justjavac / ReplaceGoogleCDN

Flutter 禁用按钮/禁止按钮点击

Tuesday, Jun 16, 2020

某些情况下我们需要禁用某个按钮的点击事件. 通过灵活的按钮禁止状态切换可以实现很多实际需求. 本篇文章就来记录下Flutter如何禁用按钮以及禁止按钮点击. 效果 有图有真相, 先来看下我们的最终效果: 应用场景 用户权限不足, 禁止某些按钮点击. 用户表单未填完, 禁止下一步. 用户阅读相关条款至少X秒, 倒数结束前锁定按钮. 需具备的条件 你了解Flutter基础 本篇文章的环境: 环境 版本 Windows 10 Android Studio 3.5 Flutter 1.19.0-2.0.pre 实战开始 准备工作 创建一个空项目. 删除./test目录. 替换./lib/main.dart为: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Disable Button', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Disable Button'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.