Flutter 设置线性边框按钮

image.png

使用

OutlineButtonWidget(
          textContent: "上传资料",
          padding: EdgeInsets.fromLTRB(0, 12, 0, 11),
          fontSize: 16,
          textStyleColor: Color(0xFF45A88E),
          borderColor: Color(0xFF45A88E),
          borderRadius: 25,
        ),

image.png

OutlineButtonWidget(
          textContent: "结束活动",
          padding: EdgeInsets.fromLTRB(0, 12, 0, 11),
          fontSize: 16,
          textStyleColor: Colors.white,
          borderColor: Color(0xFFE65E5E),
          backgroundColor: Color(0xFFE65E5E),
          borderRadius: 25,
        ),

代码

// Description：线性边框按钮
class OutlineButtonWidget extends StatelessWidget {
  final EdgeInsetsGeometry margin; //EdgeInsets.fromLTRB(10, 10,10, 10),
  final EdgeInsetsGeometry padding;
  final String textContent; //文本内容
  final TextStyle style; //文本样式 可不传直接设置字体
  final Color textStyleColor; //文本颜色
  final double fontSize; //字体大小
  final double borderRadius; //圆角角度  BorderRadius.circular(25)
  final Color borderColor; //边框颜色 Border.all(color: Colors.orange)
  final Color backgroundColor; //背景颜色
  final BoxConstraints constraints; //约束
  final width;
  final height;
  final onClick;//点击事件
  OutlineButtonWidget({
    this.margin,
    this.padding,
    this.textContent,
    this.style,
    this.textStyleColor,
    this.fontSize,
    this.borderRadius,
    this.borderColor,
    this.backgroundColor,
    this.constraints,
    this.width,
    this.height,
    this.onClick,
  });

  @override
  Widget build(BuildContext context) {
    return  GestureDetector(
      onTap: onClick,
      child: Container(
        width: width,
        height: height==null?45:height,
        constraints: constraints,
        alignment: Alignment.center,
        margin: margin,
        padding: padding == null ? EdgeInsets.fromLTRB(10, 5, 10, 5) : padding,
        child: textContent != null
            ? Text(
          textContent,
          style: style == null
              ? TextStyle(color: textStyleColor, fontSize: fontSize)
              : style,
        )
            : Text(""),
        //设置圆角
        decoration: BoxDecoration(
          borderRadius: borderRadius == null
              ? BorderRadius.circular(10)
              : BorderRadius.circular(borderRadius),
          border: borderColor == null
              ? Border.all(color: Colors.black)
              : Border.all(color: borderColor),
          color: backgroundColor,
        ),

      ),
    );
  }
}