flutter button
button类型:
RaisedButton : 凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton
FlatButton : 扁平化的按钮,继承自MaterialButton
OutlineButton :带边框的按钮,继承自MaterialButton
IconButton : 图标按钮,继承自StatelessWidget
shape:属性
BeveledRectangleBorder 带斜角的长方形边框
CircleBorder 圆形边框
RoundedRectangleBorder 圆角矩形
StadiumBorder 两端是半圆的边框
eg:
FlatButton(
child: Text('SimpleDialog'),
color: Colors.green,
// highlightColor: Colors.transparent,
splashColor: Colors.transparent,
shape: StadiumBorder(), //两边圆角
onPressed: () {
},
)
去除水波纹效果
splashColor: Colors.transparent,
自定义带渐变色button
import 'package:flutter/material.dart';
class GradientButton extends StatelessWidget {
GradientButton({
this.colors,
this.width,
this.height,
this.onTap,
@required this.child,
});
// 渐变色数组
final List<Color> colors;
// 按钮宽高
final double width;
final double height;
final Widget child;
//点击回调
final GestureTapCallback onTap;
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
//确保colors数组不空
List<Color> _colors = colors ??
[theme.primaryColor, theme.primaryColorDark ?? theme.primaryColor];
return DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(colors: _colors),
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
splashColor: colors.last,
highlightColor: Colors.transparent,
onTap: onTap,
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(height: height, width: width),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: DefaultTextStyle(
style: TextStyle(fontWeight: FontWeight.bold),
child: child),
),
),
),
),
),
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。