189 8069 5689
此控件比较简单，按钮的功能可划分为UI样式与事件回调
创新互联服务项目包括鱼台网站建设、鱼台网站制作、鱼台网页制作以及鱼台网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，鱼台网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到鱼台省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
这里将几种不同的按钮一起运行，做下对比动图如下：
这里对五种按钮进行column居中排列如下
Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。
TextStyle更多属性设置如下：
如果我们需要对一个Text内容的不同部分按照不同的样式显示，即富文本，这时就可以使用TextSpan，它代表文本的一个“片段”。
如上述，我们当然也可以在上述链接上添加手势事件，后续会提到。
在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。
举例如下：
我要做的是用BottomNavigationBarItem移除/替换FAB（浮动操作按钮），并将其放在BottomNavigationBar的中心，并为其创建样式。
为了按钮能够根据屏幕宽度进行延伸变宽，用了row和expanded，expanded多大面积，按钮就有多大面积。如果不用row，expanded会向下延伸，就不是我们要的效果了。
OutlineButton控件的child和onPressed是必须的属性，borderSide用来自定义边框颜色和样式。
1. 建立一个flutter项目的命令
2. 在ios文件夹下，生成pods文件夹
3. Xcode环境签名设置；
把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。
4.运行创建的flutter项目；
选择真机、模拟机，点击运行按钮，或使用命令运行：
下面两步是赠送的：
5.新加一款插件，所涉及的命令；
ios 端所涉及的命令
6. 刚更新的插件和已有的插件有冲突怎么办？
可以试一试以下步骤：
调用SystemChrome.setEnabledSystemUIOverlays([]);
把状态栏和虚拟按键隐藏掉，
跳转到其他页面后需要调用
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把状态栏显示出来，
需要一起调用底部虚拟按键
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下
我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。
下面我们来看看常用属性
而在Android中如果我们要修改按钮样式的话，需要通过selector和Shape等方式进行修改，相比较Flutter来说是要麻烦不少的
RaisedButton的构造方法如下，由于继承自MaterialButton，所以MaterialButton中的大多数属性这边都能用，且效果一致，这里就不在赘述了
下面我们来看一下属性
接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用
如下图所示
按钮文本控件，一般都是传一个Text Widget
按钮颜色
按钮的文本颜色
点击按钮时水波纹颜色
高亮颜色，点击（长按）按钮后的颜色
阴影范围，一般不会设置太大
内边距,使用
或者
shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类，我们来看看有哪些实现类
可以看到，实现类还是很多的，我们主要来看看常用的即可。
borderRadius 接收一个BorderRadius类型的值，常用方法如下
我们可以把borderRadius分为上下左右四个方向，下面的方法都是对这四个方向进行设置，
带斜角的长方形边框
圆形边框
圆角矩形
两端是半圆的边框
FlatButton跟RaisedButton用法基本一致，下面我们就直接用一下
注意，OutlineButton是一个有默认边线且背景透明的按钮，也就是说我们设置其边线和颜色是无效的，其他属性跟MaterialButton中属性基本一致
下面我们直接来使用
效果如下：
IconButton是直接继承自StatelessWidget的，默认没有背景
我们来看一下他的构造方法
可以看到，icon是必填参数
icon接收一个Widget，但是一般我们都是传入一个Icon Widget
其他属性跟MaterialButton中的属性用法基本一致
我们来用一下
效果如下：
我们也可以传一个Text或其他Widget，这个大家自行尝试吧
如果我们需要设置按钮的最小宽度以及高度，button属性中并没有提供对应的设置方法
使用如下：
Flutter中Button内容大概就是这些
相对于iOS开发，Flutter的布局更具有灵活性，每个页面设计都不一样，相同页面可选择的布局方式也不一样，如果单纯的说应该如何去布局，我觉得不现实，大家可以参考下 Flutter官方的布局教程 。接下来，笔者，通过项目中的一个页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。
根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用Stack；
系统介绍模块部分：整体也是涉及到叠加，考虑用Stack，分为四部分。最底部渐变色背景用一个contanier，无须指定位置，全视图扩展；载放logo图标在上一层，用Image。最后两个Text同级放在最上层。Image，Text各用Positioned包裹去指定位置。
登录内容模块是最外层是一个Contanier容器，去控制背景色和圆角。然后是一个Column元素，逐行排列。
第一行为Image，
第二行为Text，
第三行可以看成一个小Column，分两块进行布局
第四行可以看成一个小Column，分两块进行布局
第五行可以看作一个TextButton，
第六行可以看作一个Row，分三块进行布局
通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。
每一行的拆解，大致也是按照这个思路来进行，因此笔者在这里就不做讲解了。
在做到第三第四行的时候，发现这两个很相似，而且设计到一些交互逻辑，笔者就想对第三第四行的这种展示进行封装，觉得今后的布局可能会用到，因此在这一步，可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作，具体的实现笔者不再详细的描述了。
经过这一步，整体的规划设计图已经有了，各个组件也都有了，接下来的工作就是组装了。
具体布局设计到一些细节的地方，例如整体Column的居中对齐（crossAxisAlignment）、间隔（Padding或Container包裹，笔者更喜欢用SizedBox占位）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（BorderRadius）等一些特殊情况。
像第六行row是放在底部的，就可以在第六行前面增加一个Spacer()去填充空白区域。
对文字颜色大小等，可以用TextStyle直接设置。
对于输入框的删除按钮，可以用Offstage这种Flutter特有的控制显示隐藏的控件。