常用组件

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为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.

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 底部导航栏 / 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( '底部导航栏演示', ) ), ); } } 这个页面就作为我们的导航页了, 继续.