1. Aplicación de materiales

const MaterialApp({
Key key,
// 导航主键, GlobalKey<NavigatorState>
this.navigatorKey,
// 主页, Widget
this.home,
// 路由
this.routes = const <String, WidgetBuilder>{},
// 初始化路由, String
this.initialRoute,
// 构造路由, RouteFactory
this.onGenerateRoute,
// 为止路由, RouteFactory
this.onUnknownRoute,
// 导航观察器
this.navigatorObservers = const <NavigatorObserver>[],
// widget的构建
this.builder,
// APP的名字
this.title = '',
// GenerateAppTitle, 每次在WidgetsApp构建时都会重新生成
this.onGenerateTitle,
// 背景颜色
this.color,
// 主题, ThemeData
this.theme,
// app语言支持, Locale
this.locale,
// 多语言代理, Iterable<LocalizationsDelegate<dynamic>>
this.localizationsDelegates,
// flutter.widgets.widgetsApp.localeListResolutionCallback
this.localeListResolutionCallback,
// flutter.widgets.widgetsApp.localeResolutionCallback
this.localeResolutionCallback,
// 支持的多语言, Iterable<Locale>
this.supportedLocales = const <Locale>[Locale('en', 'US')],

// 是否显示网格
this.debugShowMaterialGrid = false,
// 是否打开性能监控，覆盖在屏幕最上面
this.showPerformanceOverlay = false,
// 是否打开栅格缓存图像的检查板
this.checkerboardRasterCacheImages = false,
// 是否打开显示到屏幕外位图的图层的检查面板
this.checkerboardOffscreenLayers = false,
// 是否打开覆盖图，显示框架报告的可访问性信息 显示边框
this.showSemanticsDebugger = false,
// 是否显示右上角的Debug标签
this.debugShowCheckedModeBanner = true,})

2. Barra de aplicaciones

AppBar({
Key key,
// 导航栏左侧weidget
this.leading,
// 如果leading为null，是否自动实现默认的leading按钮
this.automaticallyImplyLeading = true,
// 导航栏标题
this.title,
// 导航栏右侧按钮, 接受一个数组
this.actions,
// 一个显示在AppBar下方的控件，高度和AppBar高度一样，可以实现一些特殊的效果，该属性通常在SliverAppBar中使用
this.flexibleSpace,
// 一个AppBarBottomWidget对象, 设置TabBar
this.bottom,
//中控件的z坐标顺序，默认值为4，对于可滚动的SliverAppBar，当 SliverAppBar和内容同级的时候，该值为0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改elevation的值
this.elevation = 4.0,
// 背景颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
this.backgroundColor,
// 状态栏的颜色, 黑白两种, 取值: Brightness.dark
this.brightness,
// 设置导航栏上图标的颜色、透明度、和尺寸信息
this.iconTheme,
// 设置导航栏上文字样式
this.textTheme,
// 导航栏的内容是否显示在顶部, 状态栏的下面
this.primary = true,
// 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样
this.centerTitle,
// 标题间距，如果希望title占用所有可用空间，请将此值设置为0.0
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
// 应用栏的工具栏部分透明度
this.toolbarOpacity = 1.0,
// 底部导航栏的透明度设置
this.bottomOpacity = 1.0,})

3. Campo de texto

// 编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
this.controller,
// 用于控制`TextField`是否占有当前键盘的输入焦点, 使我们和键盘交互的`handle`
this.focusNode,
//给TextField设置装饰（形状等）
 decoration:  InputDecoration(
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(10.0),
 borderSide: BorderSide(color: Colors.transparent)),
 //输入内容距离上下左右的距离 ，可通过这个属性来控制 TextField的高度
 contentPadding: EdgeInsets.all(10.0),
 fillColor: Colors.white, filled: true,
 //labelText: 'Hello',
 // 以下属性可用来去除TextField的边框
 disabledBorder: InputBorder.none,
 enabledBorder:  InputBorder.none,
 focusedBorder:   InputBorder.none,
 //键盘类型
 keyboardType: TextInputType.text,
 //控制键盘的功能键 指enter键，比如此处设置为next时，enter键
 //显示的文字内容为 下一步
 textInputAction: TextInputAction.next,
 //键盘大小写的显示 Only supports text keyboards  但是好像不起作用？
 //characters 默认为每个字符使用大写键盘
 //sentence 默认为每个句子的第一个字母使用大写键盘
 //word 默认为每个单词的第一个字母使用大写键盘。
 //none 默认使用小写
 textCapitalization: TextCapitalization.words,
 //是否是密码
 obscureText: false,
 //文本对齐方式(即光标初始位置)
 textAlign: TextAlign.center,
 //输入文本的样式
 style: TextStyle(fontSize: 30.0, color: Colors.blue),
 //最大行数
 maxLines: 1,
 //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
 //这种情况一般是不符合我们设计的要求的，但是有需要限制其输入的位数
 // 这时候我们可以使用下方的属性来限制
 maxLength: 9,
 // 跟最大长度限制对应，如果此属性设置为false,当输入超过最大长度
 // 限制时，依然会显示输入的内容，为true不会（默认为 true）
 maxLengthEnforced: false,
 // 限制输入的 最大长度  TextField右下角没有输入数量的统计字符串
 //inputFormatters: [LengthLimitingTextInputFormatter(11)],
 //允许的输入格式 下方的模式指只允许输入数字
 //inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 //控制此小部件是否具有键盘焦点。
 focusNode: FocusNode(),
 //是否自动更正
 autocorrect:false,
 //是否自动获得焦点
 autofocus: false,
 //是否禁用textfield:如果为false, textfield将被“禁用”
 enabled: true,
 //光标颜色
 cursorColor: Colors.red,
 //光标宽度
 cursorWidth: 5.0,
 //光标圆角弧度
 cursorRadius: Radius.circular(5.0),
 //内容改变的回调
 onChanged: (text) {
    print('change $text');
  },
 //内容提交(按回车)的回调
 onSubmitted: (text) {
    print('submit $text');
  },
 //按回车时调用
  onEditingComplete: (){
    print('onEditingComplete');
  },
// 键盘的外观, Brightness.light和dark
this.keyboardAppearance,
// 当TextField滚动时, 设置文本字段在滚动后的位置与可滚动项的边缘的距离
this.scrollPadding = const EdgeInsets.all(20.0),
// 长按输入的文本, 设置是否显示剪切，复制，粘贴按钮, 默认是显示的
this.enableInteractiveSelection = true,
// 点击输入框时的回调(){}
this.onTap,

Decoración

const InputDecoration({
// 接收Widget, 在输入框左侧显示的图片                  
this.icon,
// String, 输入框的描述, 当输入框获取焦点时默认会浮动到上方
this.labelText,
// TextStyle, 样式
this.labelStyle,
// 辅助文本, 位于输入框下方，如果errorText不为空的话，则helperText不显示
this.helperText,
this.helperStyle,
/// 提示文本，位于输入框内部
this.hintText,
this.hintStyle,
// 错误信息提示文本
this.errorText,
this.errorStyle,
// errorText显示的最大行数
this.errorMaxLines,
// errorText不为空，输入框没有焦点时要显示的边框
this.errorBorder,
// labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
this.hasFloatingPlaceholder = true,
// 改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
this.isDense,
// 内间距
this.contentPadding,
// 位于输入框内部起左侧置的图标
this.prefixIcon,
// 预先填充在输入框左侧的Widget,跟prefixText同时只能出现一个
this.prefix,
//预填充在输入框左侧的文本, 不可修改删除，例如手机号前面预先加上区号等
this.prefixText,
this.prefixStyle,
// 位于输入框内部右侧位置的图标
this.suffixIcon,
// 预先填充在输入框右侧的Widget,跟suffixText同时只能出现一个
this.suffix,
// 预填充在输入框右侧的文本, 不可修改删除
this.suffixText,
this.suffixStyle,
// 位于右下方显示的文本，常用于显示输入的字符数量
this.counterText,
this.counterStyle,
// 相当于输入框的背景颜色
this.fillColor,
// 如果为true，则输入使用fillColor指定的颜色填充
this.filled,
// 输入框有焦点时的边框,如果errorText不为空的话，该属性无效
this.focusedBorder,
// errorText不为空时，输入框有焦点时的边框
this.focusedErrorBorder,
// 输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
this.disabledBorder,
// 输入框可用时显示的边框，如果errorText不为空的话，该属性无效
this.enabledBorder,
// 正常情况下的边框
this.border,
// 输入框是否可用
this.enabled = true,
// counterText的语义标签, 如果赋值将替换counterText, 但是我试了好像没什么效果
this.semanticCounterText,})

formatos de entrada

用于限制输入的内容，接收一个TextInputFormatter类型的集合
TextInputFormatter是一个抽象类, 官方给我们提供了他的三个子类，分别是
WhitelistingTextInputFormatter: 白名单校验，也就是只允许输入符合规则的字符
BlacklistingTextInputFormatter: 黑名单校验，除了规定的字符其他的都可以输入
LengthLimitingTextInputFormatter: 长度限制，跟maxLength作用类似
// 白名单
inputFormatters: [
// 只能输入数字
WhitelistingTextInputFormatter.digitsOnly,
// 是能输入小写字母
WhitelistingTextInputFormatter(RegExp("[a-z]"))
],
// 黑名单
inputFormatters: [
// 不能输入回车符
BlacklistingTextInputFormatter.singleLineFormatter,
// 不能输入小写字母
BlacklistingTextInputFormatter(RegExp("[a-z]"), replacementString: '-')
],
// 字符限制
[LengthLimitingTextInputFormatter(10)]
// 也可是三种或两种一起使用一起使用
inputFormatters: [
// 不能输入小写字母
BlacklistingTextInputFormatter(RegExp("[a-z]")),
// 限制输入10个字符
LengthLimitingTextInputFormatter(10)
],

configuración del cursor

设置输入框光标的样式
// 光标的宽度
this.cursorWidth = 2.0,
// 光标的圆角
this.cursorRadius,
// 光标的颜色
this.cursorColor,
// 示例如下
cursorWidth: 10,
cursorColor: Colors.cyan,
cursorRadius: Radius.circular(5),

4. barra de navegación

const CupertinoNavigationBar({
Key key,
//导航栏左侧组件
this.leading,
//是否显示左边组件, 好像无效
this.automaticallyImplyLeading = true,
//是否显示中间组件, 好像无效
this.automaticallyImplyMiddle = true,
//导航栏左侧组件的右边的文本, 好像无效
this.previousPageTitle,
// 导航栏中间组件
this.middle,
// 导航栏右侧组件    
this.backgroundColor = _kDefaultNavBarBackgroundColor,
// 设置左右组件的内边距, EdgeInsetsDirectional
this.padding,
//左侧默认组件和左侧组件右边文本的颜色
this.actionsForegroundColor = CupertinoColors.activeBlue,
this.transitionBetweenRoutes = true,
this.heroTag = _defaultHeroTag})

5. andamio

const Scaffold({
Key key,
// 显示在界面顶部的一个AppBar
this.appBar,
// 当前界面所显示的主要内容Widget
this.body,
// 悬浮按钮, 默认在右下角位置显示
this.floatingActionButton,
// 设置悬浮按钮的位置
this.floatingActionButtonLocation,
// 悬浮按钮出现消失的动画
this.floatingActionButtonAnimator,
// 在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
this.persistentFooterButtons,
// 一个垂直面板，显示于左侧，初始处于隐藏状态
this.drawer,
// 一个垂直面板，显示于右侧，初始处于隐藏状态
this.endDrawer,
// 出现于底部的一系列水平按钮
this.bottomNavigationBar,
// 底部的持久化提示框
this.bottomSheet,
// 背景色
this.backgroundColor,
// 重新计算布局空间大小
this.resizeToAvoidBottomPadding = true,
// 是否显示到底部, 默认为true将显示到顶部状态栏
this.primary = true,})

6. Botón de acción flotante

const FloatingActionButton({
Key key,
this.child,
// 文字解释, 按钮呗长按时显示
this.tooltip,
// 前景色
this.foregroundColor,
// 背景色
this.backgroundColor,
// hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
this.heroTag = const _DefaultHeroTag(),
// 未点击时阴影值，默认6.0
this.elevation = 6.0,
// 点击时阴影值，默认12.0
this.highlightElevation = 12.0,
// 点击事件监听
@required this.onPressed,
// 是否为“mini”类型，默认为false
this.mini = false,
// 设置阴影, 设置shape时，默认的elevation将会失效,默认为CircleBorder
this.shape = const CircleBorder(),
// 剪切样式
this.clipBehavior = Clip.none,
// 设置点击区域大小的样式, MaterialTapTargetSize的枚举值
this.materialTapTargetSize,
// 是否为”extended”类型
this.isExtended = false,})

7. Barra de pestañas

const TabBar({
Key key,
// 数组,显示的标签内容,一般使用Tab对象,当然也可以是其他的Widget
@required this.tabs,
// TabController对象
this.controller,
// 是否可滚动
this.isScrollable = false,
// 指示器颜色
this.indicatorColor,
// 指示器高度
this.indicatorWeight = 2.0,
// 指示器内边距
this.indicatorPadding = EdgeInsets.zero,
// 设置选中的样式decoration，例如边框等
this.indicator,
// 指示器大小, 枚举值TabBarIndicatorSize
this.indicatorSize,
// 选中文字颜色
this.labelColor,
// 选中文字样式
this.labelStyle,
// 文字内边距
this.labelPadding,
// 未选中文字颜色
this.unselectedLabelColor,
// 未选中文字样式
this.unselectedLabelStyle,})

8. Barra de navegación inferior

BottomNavigationBar({
Key key,
// 子widget数组
@required this.items,
// 每一个item的点击事件
this.onTap,
// 当前选中的索引
this.currentIndex = 0,
// 类型
BottomNavigationBarType type,
// 文字颜色
this.fixedColor,
// 图片大小
this.iconSize = 24.0,})

9. Vista de desplazamiento de un solo niño

this.scrollDirection = Axis.vertical,  //滚动方向
this.reverse =false,//滚动方向是否反向
this.padding,//边距
bool primary,//这是否是与父控件关联的主滚动视图 猜应该是是否与父控件一起滑动 用来解决滑动冲突
this.physics,//滑动松手后的滑动方式
this.controller,
this.child,//子view

10. Campo de formulario de texto

TextFormField({
Key key,
this.controller,//控制正在编辑的文本。如果为空，这个小部件将创建自己的TextEditingController并使用initialValue初始化它的TextEditingController.text
String initialValue,//初始值
FocusNode focusNode,
InputDecoration decoration = const InputDecoration(),//输入器装饰
TextInputType keyboardType,//弹出键盘的类型
TextCapitalization textCapitalization = TextCapitalization.none,//户输入中的字母大写的选项,TextCapitalization.sentences每个句子的首字母大写,TextCapitalization.characters:句子中的所有字符都大写，TextCapitalization.words : 将每个单词的首字母大写。
TextInputAction textInputAction,//更改TextField的textInputAction可以更改键盘右下角的操作按钮,搜索，完成
TextStyle style,
TextDirection textDirection,//文字显示方向
TextAlign textAlign = TextAlign.start,//文字显示位置
bool autofocus = false,//自动获取焦点
bool obscureText = false,//是否隐藏输入，true密码样式显示，false明文显示
bool autocorrect = true,
bool autovalidate = false,//是否自动验证值
bool maxLengthEnforced = true,
int maxLines = 1,//编辑框最多显示行数
int maxLength,//输入最大长度，并且默认情况下会将计数器添加到TextField
VoidCallback onEditingComplete,//当用户提交时调用
ValueChanged<String> onFieldSubmitted,
FormFieldSetter<String> onSaved,//当Form表单调用保存方法save时回调
FormFieldValidator<String> validator,//Form表单验证
List<TextInputFormatter> inputFormatters,
bool enabled = true,
Brightness keyboardAppearance,
EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
bool enableInteractiveSelection = true,
})

Botones en Flutter

RaisedButton: El botón elevado es en realidad el botón de estilo Material Design en Android, heredado de MaterialButton.
FlatButton: Botón plano, heredado de MaterialButton
OutlineButton: Botón con borde, heredado de MaterialButton
IconButton: botón de icono, heredado de StatelessWidget

Primero echemos un vistazo a las propiedades en MaterialButton, podemos ver que todavía hay muchas propiedades que se pueden configurar.

const RaisedButton({
Key key,
@required VoidCallback onPressed,//可以通过这个设置禁用或启用控件
ValueChanged<bool> onHighlightChanged,//水波纹高亮变化回调,按下返回true,抬起返回false
ButtonTextTheme textTheme,//按钮的主题
Color textColor,//文字的颜色
Color disabledTextColor,//按钮禁用时候文字的颜色
Color color,//按钮的背景颜色
Color disabledColor,//按钮被禁用的时候显示的颜色
Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
Color splashColor,//水波纹的颜色
Brightness colorBrightness,//按钮主题高亮
double elevation,//按钮下面的阴影
double highlightElevation,//高亮时候的阴影
double disabledElevation,//按下的时候的阴影
EdgeInsetsGeometry padding,//设置padding
ShapeBorder shape,//设置形状
Clip clipBehavior = Clip.none,//根据此选项，内容将被剪裁（或不剪辑）
MaterialTapTargetSize materialTapTargetSize,//配置点击目标的最小尺寸
Duration animationDuration,//定义形状和高程的动画更改的持续时间
Widget child,//设置子控件
})

Echemos un vistazo a las propiedades comunes.
Insertar descripción de la imagen aquí

Botón elevado

onPressed
recibe un método que se vuelve a llamar cuando se hace clic en el botón. Si se pasa nulo, significa que el botón desactiva
el
control de texto del botón secundario. Generalmente, se pasa un
color de widget de texto.
El color del botón
textColor
El color del texto del botón
splashColor
El color de la onda del agua cuando se hace clic en el botón
resaltadoColor El
color de resaltado después de hacer clic (presionando prolongadamente) el botón Rango de sombra
de elevación de color
, generalmente no establezca un margen interno
de relleno demasiado grande
, el tipo de valor recibido es el tipo EdgeInsetsGeometry, EdgeInsetsGeometry es una clase abstracta,
EdgeInsets.all (), EdgeInsets .fromLTRB (), EdgeInsets.only ()
forma
La forma se utiliza para establecer la forma del botón. Su valor recibido es el tipo ShapeBorder. ShapeBorder es una clase abstracta.

BeveledRectangleBorder borde rectangular con bisel,
Borde circular CircleBorder
RoundedRectangleBorder rectángulo redondeado
StadiumBorder es un borde con semicírculos en ambos extremos.
El lado se utiliza para establecer el borde (color, ancho, etc.)
borderRadius se utiliza para establecer esquinas redondeadas

lado recibe un valor de tipo BorderSide

desestimable

/**
*  滑动删除
 **/
 const Dismissible({
@required Key key,//
@required this.child,//
this.background,//滑动时组件下一层显示的内容，没有设置secondaryBackground时，从右往左或者从左往右滑动都显示该内容，设置了secondaryBackground后，从左往右滑动显示该内容，从右往左滑动显示secondaryBackground的内容
//secondaryBackground不能单独设置，只能在已经设置了background后才能设置，从右往左滑动时显示
this.secondaryBackground,//
this.onResize,//组件大小改变时回调
this.onDismissed,//组件消失后回调
this.direction = DismissDirection.horizontal,//
this.resizeDuration = const Duration(milliseconds: 300),//组件大小改变的时长
this.dismissThresholds = const <DismissDirection, double>{},//
this.movementDuration = const Duration(milliseconds: 200),//组件消失的时长
this.crossAxisEndOffset = 0.0,//
})
示例
new Dismissible(
  //如果Dismissible是一个列表项 它必须有一个key 用来区别其他项
  key: new Key(lists[index]),
  //在child被取消时调用
  onDismissed: (direction) {
    lists.removeAt(index);
  },
  //如果指定了background 他将会堆叠在Dismissible child后面 并在child移除时暴露
  background: new Container(
    color: Colors.red,
  ),
  child: 这里放你的item widget
  ),
);

Introducción a las propiedades de Flutter