/** * Created with Android Studio. * User: 一晟 * Date: 2018/11/22 * Time: 上午12:03 * email: zhu.yan@alibaba-inc.com * tartget: OutlineButton 的示例 */ import 'dart:math'; import 'package:flutter/material.dart'; /* * OutlineButton 默认按钮的实例 * isDisabled:是否是禁用,isDisabled 默认为true * */ class OutlineButtonDefault extends StatelessWidget { final bool isDisabled; const OutlineButtonDefault([ this.isDisabled = true]) : assert(isDisabled != null), super(); @override Widget build(BuildContext context) { return OutlineButton( // 文本内容 child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'), onPressed: isDisabled ? () {} : null); } } /* * OutlineButton.icon 默认按钮的实例 * Create a text button from a pair of widgets that serve as the button's icon and label * isDisabled:是否是禁用 * */ class OutlineButtonIconDefault extends StatelessWidget { final bool isDisabled; final IconData icon; const OutlineButtonIconDefault( [ this.isDisabled = true, this.icon = Icons.add_circle]) : super(); @override Widget build(BuildContext context) { return OutlineButton.icon( // 文本内容 icon: Icon(icon, size: 25.0, color: _randomColor()), label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'), onPressed: isDisabled ? () { //_showMessage('点击了 FLAT BUTTON ', context); } : null); } } /* * OutlineButton 自定义的实例 * */ class OutlineButtonCustom extends StatelessWidget { final String txt; final Color color; final ShapeBorder shape; final VoidCallback onPressed; const OutlineButtonCustom( [ this.txt = '自定义按钮', this.color = Colors.blueAccent, this.shape, this.onPressed]) : super(); @override Widget build(BuildContext context) { final _onPressed = onPressed; return OutlineButton( // 文本内容 child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'), // 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor borderSide: BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()), // 按钮颜色 color: _randomColor(), // 按钮失效时边框颜色 disabledBorderColor: Colors.red, highlightedBorderColor:Colors.black54, // 高亮时的背景色 highlightColor: Colors.yellow, // 失效时的背景色 //disabledColor: Colors.grey, // 该按钮上的文字颜色,但是前提是不设置字体自身的颜色时才会起作用 textColor: _randomColor(), // 按钮失效时的文字颜色,同样的不能使用文本自己的样式或者颜色时才会起作用 disabledTextColor: _randomColor(), // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton,OutlineButton,OutlineButton,它们是基于环境ButtonTheme配置的 //ButtonTextTheme.accent,使用模版颜色的;ButtonTextTheme.normal,按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary,按钮文本基于。ThemeData.primaryColor. textTheme: ButtonTextTheme.normal, // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色,当你不设置高亮背景时才会看的更清楚 splashColor: _randomColor(), // 抗锯齿能力,抗锯齿等级依次递增,none(默认),hardEdge,antiAliasWithSaveLayer,antiAlias clipBehavior: Clip.antiAlias, padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), //高亮时候的阴影 highlightElevation: 10.0, shape: shape, // 在Outline 里只能设置圆角,边框用borderSide // OutlineButton 的点击事件 onPressed: () { // Perform some action if (_onPressed is VoidCallback) { _onPressed(); } }); } } Color _randomColor() { var red = Random.secure().nextInt(255); var greed = Random.secure().nextInt(255); var blue = Random.secure().nextInt(255); return Color.fromARGB(255, red, greed, blue); }