flutter

修改Flutter APP启动图标/Launcher Icon

Thursday, Dec 10, 2020

开门见山 为了简化修改Flutter启动图标的过程, Flutter Launcher Icons诞生了. 开始 访问 Flutter Launcher Icons 库网址 . 访问慢的同学可以使用国内镜像 . 修改你的pubspec.yaml文件(版本号替换为最新的): ` dev_dependencies: flutter_launcher_icons: ^0.8.1` 在资源目录中创建你的icon文件, 比如路径assets/icon/icon.png. 然后再次修改pubspec.yaml: ` flutter_icons: android: "launcher_icon" ios: true image_path: "assets/icon/icon.png"` 在终端中分别运行以下命令: `flutter pub get` `flutter pub run flutter_launcher_icons:main` 其他资源 点击此处 查看完整示例项目 如果使用该库出现任何问题, 请提issue

Flutter 调整 Switch 组件尺寸

Wednesday, Aug 5, 2020

默认的Switch组件并没有提供类似Size或者Height,Weight等参数。本篇文章就来记录下Flutter如何调整Switch组件尺寸。 实战开始 普通的Switch 通常，我们声明一个Switch组件会这样写。运行以下代码： ` import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Switch Size', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { bool _enabled = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Switch Size'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.

Flutter/Dart List去重, 去除重复列表项

Monday, Jul 20, 2020

有时我们需要过滤掉重复的列表项, 本篇文章就来介绍下Flutter/Dart 如何进行 List去重, 去除重复列表项. 实战开始 方法一: List与Set互转 基于Set集合的不可重复特性, 我们利用该特性可轻松解决: void main() { // 声明一个集合 var ids = [1, 1, 4, 4, 5, 6, 6]; // 进行去重, 存储去重后的集合 var distinctIds = ids.toSet().toList(); } 当然, 基于该思路还有更牛逼的写法: var distinctIds = [...{...ids}]; [epcl_box type=“success”]这也许是最优雅的解决方案.[/epcl_box] 方法二: List与Set互转(保留顺序) 方案一虽然优雅, 但也不是完美的. 它无法保留顺序. 如果我们的需求对顺序有绝对的要求时, 就需要以下方法了: import 'dart:collection'; void main() { // 声明一个集合 List arr = ["a", "a", "b", "c", "b", "d"]; // 进行去重, 存储去重后的集合 List result = LinkedHashSet.

妥善处理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.

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.

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.

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.

Flutter为widget添加border边框、下划线

Monday, Jun 15, 2020

有时我们需要为Flutter的widget小部件添加各式各样的边框. 但是并不是所有widget都提供了边框的属性, 本篇文章就来记录下如何为Flutter 的 widget 添加border边框、下划线. 效果 有图有真相, 先来看下我们要实现的最终效果: 需具备的条件 你已经掌握Flutter基础 本篇文章的开发环境: 环境 版本 操作系统 Windows 10 Flutter 1.19.0-2.0.pre IDE Android Studio 3.5 [epcl_box type=“information”]速度快的同学直接复制下方的"全部源码"自行研究! 稳一点的同学请按照教程一步一步来! [/epcl_box] 实战开始 创建项目&清理代码 为了便于演示, 阿航在这里创建一个空项目. 创建完成后, 删除./test目录. 因为我们的demo无需测试类. 替换./lib/main.dart为: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Awesome Border', theme: ThemeData(primarySwatch: Colors.blue), home: MyHomePage(title: 'My Awesome Border'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.