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),
),
),
),
),
),
);
}
}