一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照<Flutter技术入门与实战>上面来说的话,大概分为四类 基础布局组件:Container(容器布局),Center(居中布局),Padding(填充布局),Align(对齐布局),Colum(垂直布局),Row(水平布局),Expanded(配合Colum,Row使用),FittedBox(缩放布局)

如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输入信息等.表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormField组件用来做用户输入的. Form组件属性 属性 类型 说明 Key Key 组件在整个Widget树中的key值 autovalidate bool 是否自动提交表单 child Widg

快速生成无状态模板 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Container( ); } } 快速生成有状态模板 void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppSt

如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上所有的应用程序都会有用户名.密码输入框,搜索框等等,前面我们有写过一篇基于Form表单的输入功能,今天来看一下TextField文本框组件,文本输入是最常见的一种交互方式,TextField组件就是用来做文本输入的组件.注意这个要和Text组件区分开来,Text组件主要用于显示文本,并不能接受输入文

公众号「AndroidTraveler」首发. 1. width 属性 对于设置控件宽度填充父控件这件事情,在 Android 里面,只需要设置 MATCH_PARENT 即可. 但是在 Flutter 里面却不是这样,因为 Flutter 要具体的数值. 所以我们可以这样考虑,假设我这个值非常大,比所有市面上的设备宽度还要大,那么是不是表现出来就是充满父控件了. 所以这边的做法是设置为无限,即 double.infinite 我们以一个常用场景来说明. 比如设置图片填充屏幕宽度. 刚开始没有设

前言 这次对布局进行优化,主要包含了首页tabview pageview 以及添加几个按钮的操作过程.主要使用到stack层叠布局,tabpview和pageview,tabview两个页面,一个关注,一个推荐,左右切换,pageview被包含在tabview里面. 布局优化 抖音的顶部appbar 是悬浮层叠展示,而flutter的层叠组件是stack, 因此最外面采用stack, 其次中间是tabview,分别是关注和推荐两个选项卡,关注在没有登录的时候会弹出一个提示需要认证登录的页面,这里

该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/flutter_widget_demo 欢迎Star 博客:思否, 掘金, 知乎, 简书, 慕课, CSDN, 博客园, DX前端 公众号:DX前端框架知识库 联系我:公众号菜单点击联系我 使用场景 组件解释:固定高度的单个行,通常包含一些文本以及前导或尾随图标. 当需要给一个列表list的时候,你可以

目录 简介 Card详解 Card的使用 总结 简介 除了通用的组件之外,flutter还提供了两种风格的特殊组件,其中在Material风格中,有一个Card组件,可以很方便的绘制出卡片风格的界面,并且还带有圆角和阴影,非常的好用,我们一起来看看吧. Card详解 在详细讲解Card之前,我们考虑一下什么时候会用到Card? 一提到Card大家第一印象就是名片,在名片中描述了一个人的相关信息,比如姓名,电话和邮箱等.而Card就是将一组相关的信息放在一起呈现的组件. 我们来看下Card的定义:

目录 简介 Offstage详解 Offstage的使用 总结 简介 我们在使用flutter的过程中,有时候需要控制某些组件是否展示,一种方法是将这个组件从render tree中删除,这样这个组件就相当于没有出现一样,但是有时候,我们只是不想展示这个widget,但是这个组件还是存在的,并且可以接受键盘输入,还可以使用CPU.它和真正的组件唯一不同的就是他是不可见的. 这样的组件就叫做Offstage. 今天给大家详细介绍一下Offstage的使用. Offstage详解 我们首先来看下Of

博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://github.com/wangjiegulu/flutter_test_01 编写你的第一个Flutter App 原文:https://flutter.io/get-started/codelab/ 这个你创建第一个Flutter app的指南.如果你熟悉面向对象的代码,基本的编程概念,比如变量,循

flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词是child或者children.以我几乎为0的web布局经验,往往在使用widget的时候,头脑里面映射的都是div,table等语义话标签. StatefulWidget和StatelessWidget Widget大类上分为两个,StatefulWidget和StatelessWidget.这

前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 StatefulWidget,我们要继承哪一个? 下面让我们跟着文章来探索一番. 目录 1. StatelessWidget 我们先来看下继承的 Widget 为 StatelessWidget 的情况. 第一步:新建一个文件 bold_text.dart 这里文件名后面后缀 .dart 可带可不带

背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 826 pixels

前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutter 的 UI. 前言 说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧. 举个例子: 假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天.那么就是两天. 如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都

背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么知道? 比如我在原生有些变化需要告知 Flutter,Flutter 又如何获知? 本篇我们先解决第一个问题.即 Flutter-> 原生的通信. 路由回顾 之前我们一直在讲 Flutter 相关的知识点,而且基本上都是在 main.dart 文件上面折腾,为了避免很多小伙伴觉得我们跨度过大. 因此

前言 本篇文章对于熟悉 flutter 或者 dart 的小伙伴来说可能觉得比较简单,但是对于初学者或者没用过的小伙伴还是有些收获的. 背景 说到 map 妙用的发现,还要归功于 Tooltip 的研究. 在研究这个 Widget 的时候,看到了它的源码 demo,所以发现了这个 map 的妙用. 那么妙用在哪呢? 统一处理 我们在上节课说到了 Expanded 的比例布局. 源代码如下: return Column( children: <Widget>[ Expanded( flex: 1

本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { retu

前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flutter. 官方 WIKI 有说明,但是里面坑还是不少的,变化也是存在的. 因此就让我们来看一看. 目录 1. 按照官网实现基本引入 Add Flutter to existing apps 上面为GitHub WIKI 的引入方式,通过 Module 的形式进行引入. 可以看出文档还是在不断更新的

本篇为继上片监听返回键基础下优化: 以下做返回键监听两种情况: import 'package:fluttertoast/fluttertoast.dart'; //提示第三方插件 1. 单击提示双击退出,双击时退出App DateTime _lastPressedAt; //上次点击时间 main.dart-MyApp中: home: WillPopScope( // 监听返回键Widget onWillPop: () async { // 点击返回键即触发该事件 if (_lastPress

1. 定义local_srorage.dart文件 使用Flutter第三方插件shared_preferences实现存储键值对信息 相关shared_preferences插件可参考: flutter 本地存储 (shared_preferences) import 'dart:convert'; import 'package:shared_preferences/shared_preferences.dart'; class LocalStorage { static Future ge