应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。
经过上一篇文章，开发出来了第二个 Flutter 程序，接下来是给大家详细的介绍下 Flutter 的布局组件。
上一节我们介绍了Row, Column, Image, Text四个基础组件，这一节我们来看看下面几个组件。
经过上一篇文章的学习，我们大家可以了解到布局相关的组件，但是在实际开发中，我们还需要使用到其他的组件，比如按钮、图片、文本、输入框等等，这些组件都是我们在开发中经常使用的，所以本篇文章我们就来学习一下这些常用组件。
简单列举总结一下常用的布局widget。 Flutter有丰富的layout组件库。其中有一些是常用库。 下面的widget分为两类：标准组件和来自Material Components的特殊组件。 只有Material App能够使用Material Components的组件。
AlertDialog 对话框组件 , 可设置标题 , 内容 , 等一系列对话框相关的设置 , 下面代码是 AlertDialog 的构造函数源码 ;
一个简单我的页面，之前做过iOS的应该知道，TableView 可以设置section header，但是ListView没有区分Section和Row。ListView有ListTile，但是我还是自定义了一个
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
Flutter里面的文本样式 image const TextStyle({ this.inherit: true, // 为false的时候不显示 this.colo
Flutter开发中有一个非常重要的理念，即一切皆为组件。Flutter中Widget不仅可以表示UI元素，也可以布局元素、动画、装饰效果。
如果您希望 body 的高度扩展到包含应用栏的高度并且 body 的顶部与应用栏的顶部对齐，则必须将Scaffold小部件的extendBodyBehindAppBar属性设置为true（默认值为false )。
创建空的 dart 文件 StatelessWidgetPage.dart , 导入最基础的材料设计包 ,
总结：TextAlign.center居中对齐，left左对齐，right右对齐，start和end的含义取决于TextDirection，当TextDirection为ltr即(left-to-right)时，start和end的含义同left和right一致。当TextDirection为rtl即(right-to-left)时，start和end的含义和left、right相反。justify不生硬的换行（好吧，我翻译不了，看下图吧）
在本篇文章中，我们将使用官方最新的Dart语法和新知识，详细介绍Flutter中的Material Design和Cupertino风格组件。Flutter提供了两种主题风格，分别是Material Design和Cupertino，用于创建漂亮、一致的用户界面。我们将深入探讨这两种风格的组件，并提供官方文档链接，以便你进一步学习。
2.leading默认是一个返回箭头，有时候我们需要定义，有时候也仅是简单的返回上一层，就需要自定义了，他支持子组件。
说一下背景，就是我们在编写 Flutter 程序的时候，我们目前是将所有的代码都编写在一个文件中，现在代码量比较少所以看上去还好，但是当代码量比较大的时候，这样的代码就会显得非常的臃肿，不利于我们的维护。
使用了flutter一段时间，越来越喜欢flutter了，flutter比我们想象中的强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮的list，先看下效果图。
需求是这样的，本来都想自定义TabBar，没有想到TabBar原生的就支持这个方式,只需要设置以下式样就能达到效果了
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 6 天，点击查看活动详情
SliverAppBar 类似于Android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果。 与AppBar大部分的属性重合，相当于AppBar的加强版。
Flutter中有很多Button组件，例如RaisedButton、FlatButton、IconButtton、OutlineButton、ButtonBar、FloatingActionButton等。 RaisedButton：凸起的按钮，其实就是Material Design风格的Button. FlatButton:扁平化的按钮 OutlineButton:线框按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮
经过上一篇文章，开发出来了第一个 Flutter 程序，入门程序 Hello World，这一篇文章就是接着上一篇。咱们来还原初始程序（开发第二个 Flutter 程序）。
自定义的好处是可以在addListener中增加监听，通过setState修改状态
主要是介绍了 Flutter 环境的搭建、如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter。
对于一个APP来说，肯定会有一个AppBar，这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar，但是这样就会丢失很多特效，比如将AppBar固定在顶部，AppBar可以在滑动的过程中进行大小变换等。
我在之前的文章文本、图片和按钮在Flutter中怎么用中，简单介绍过按钮组件，本篇文章来详细聊聊Flutter中的各种按钮组件的各种应用场景。
Text widget 可以用来在应用内创建带样式的文本。文本作为UI最基本的元素，最基本的用法有这些：
AppBar（title属性，Text组件； action：动作响应；！！！！ titleSpacing：标题文字间距； toolbarOpacity：标题透明度；）
可以看到，根据我们对drawer的认识，并不是想要的结果，所以这个drawer并不完整，然后我们继续添加代码，修改drawer
Card，卡片式布局，带有一点圆角和阴影。通常用于关联信息的展示，比如：相册信息、经纬度、联系人信息等等。
flutter中所有的组件都是由widgets组成的，flutter中有各种各样的widgets，这些widgets构成了flutter这个大厦。
学习Flutter也有一阵子了。闲着没事，用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了，所以都是些死数据，实现效果可以说是很完美了（得到了设计的认可。。。）。当然自己也是边查边写，也借鉴了许多Github上优秀的Flutter项目。现在开源出来（附带设计图），供大家交流学习。希望多多Star、Fork支持，有问题可以Issue。附上链接：github.com/simplezhli/…
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://www.jianshu.com/p/f79bf0fb213c
上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建，具体的有需要的可以去看看Flutter分类的文章，这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List的使用，我们先总结本地图片的引用。今天这篇文章的具体的UI效果如下：
【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】
EdgeInsetsGeometry 是一个抽象类，开发中，我们一般都使用 EdgeInsets 类，他是 EdgeInsetsGeometry 的子类，定义了一下设置填充的方法
这里我将展示我在使用 Flutter 布局的代码片段。我将通过精美的代码片段结合可视化的图形来举例。
首先，我们来修改状态栏的颜色，Flutter提供了SystemChrome.setSystemUIOverlayStyle来修改状态栏和底部导航栏的样式修改，借助它，我们可以很方便的干掉状态栏的默认颜色。
对于设置控件宽度填充父控件这件事情，在 Android 里面，只需要设置 MATCH_PARENT 即可。
「 flutter 必知必会 」贴心解析：状态管理与数据共享 InheritedWidget 完整使用方案，为你铺平大前端学习之路
AspectRatio的作用是根据设置调整子元素child的宽高比 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率确定的，按照固定比例去尽量占满区域。 在满足所有限制条件后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比例。
在现代科技发展迅速的时代，我们的电脑、手机、平板等设备里积累了大量的文件，这些文件可能是我们的照片、文档、音频、视频等等。然而，当文件数量增多时，我们如何快速地找到所需的文件呢？这时，文件列表就显得尤为重要了。
其中最重要的两个组件是 ① 无状态的 StatelessWidget 组件 和 ② 有状态的 StatefulWidget 组件 ;
Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;
在如今的 Fultter 大潮下，本系列是让你看完会安心的文章。本系列将完整讲述：如何快速从0开发一个完整的 Flutter APP，配套高完成度 Flutter 开源项目 GSYGithubAppFlutter。同时也会提供一些Flutter的开发细节技巧，并针对开发过程中可能遇到的问题进行填坑。
和尚最近在利用业余时间学习 Flutter，还真的是值得研究。和尚觉得学习一门技术最好的方式就是动手，在实践过程中结合官网文档才能更快的学习和理解。因为和尚技术太差，花了很久才搭建了一个最简单的【登录】页面，对于同一个页面，搭建的方式千差万别，和尚的方式也绝非最佳，现在仅结合这个基本的【登录】页面记录整理一下遇到的问题。 和尚这次整理的小博客只是单纯的搭建页面，不涉及以无逻辑和页面跳转，毕竟和尚还没研究到那部分。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
