在项目中使用的时候,发现系统按钮并不符合我的需求,所以我把常用的按钮,按照我自己的理解,封装了一个! 供大家参考,如果有建议,可以评论提出! 十分感谢!

只有文字的button

/*

*只有文字的button

*/

class XXTextButton extends StatelessWidget {

const XXTextButton({

Key key,

this.onTap,

this.textColor,

this.title,

this.width,

this.height,

this.backColor = Colors.transparent,

this.fontsize = 15.0,

this.borderColor = Colors.transparent,

this.circular = 0.0,

this.padding,

this.borderWidth,

}) : super(key: key);

final onTap;

final width; //整体宽

final height; //整体高

final backColor; //背景颜色

final circular; //弧度

final double borderWidth;

final Color borderColor;

final Color textColor;

final String title;

final double fontsize;

final EdgeInsetsGeometry padding;

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: onTap,

child: Container(

padding: padding,

decoration: BoxDecoration(

color: backColor,

border: Border.all(width: 1, color: borderColor),

borderRadius: BorderRadius.circular(circular),

),

child: Text(

title,

style: TextStyle(

fontSize: ScreenAdapt.sizeX2(fontsize),

color: textColor,

fontWeight: FontWeight.normal,

),

),

),

);

}

}

点击带边框按钮

/*

*点击带边框按钮

*/

class XXClickLineBtn extends StatelessWidget {

const XXClickLineBtn(

{Key key,

this.color,

this.title,

this.onTap,

this.circular,

this.width,

this.backColor,

this.height})

: super(key: key);

final Color color; //颜色

final String title; //文字

final onTap; //点击方法

final circular; //弧度

final width; //整体宽

final backColor; //背景颜色

final height; //整体高

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: onTap,

child: Container(

alignment: Alignment.center,

width: width,

height: height,

child: Text(

title,

style: TextStyle(

fontSize: ScreenAdapt.size(24),

color: color,

),

),

decoration: BoxDecoration(

color: backColor,

border: Border.all(width: 1, color: color),

borderRadius: BorderRadius.circular(circular),

),

),

);

}

}

图片的点击按钮 iconBtn

/*

*图片的点击按钮 iconBtn

*/

class XXMyIconBtn extends StatelessWidget {

const XXMyIconBtn({

Key key,

this.iconSting,

this.onPressed,

this.width,

this.height,

}) : super(key: key);

final iconSting; //图片的地址

final onPressed; //执行的方法

final width; //宽

final height; //高

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: onPressed,

child: Container(

width: width,

height: height,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(iconSting),

fit: BoxFit.fill,

),

),

),

);

}

}

图片 + 文字按钮 icon在左 tiitle在右

/*

*图片 + 文字按钮 icon在左 tiitle在右

*/

class XXClickImageAndTitleBtn extends StatelessWidget {

const XXClickImageAndTitleBtn(

{Key key,

this.image,

this.imageSize,

this.title,

this.padding,

this.fontSize,

this.textColor,

this.onTap})

: super(key: key);

final Widget image; //image

final Size imageSize; //image的宽高

final String title; //文字

final double padding; //图片和文字之间的间距

final double fontSize; //文字的大小

final Color textColor; //文字的颜色

final onTap; //执行的方法

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: onTap,

child: Container(

// width: ScreenAdapt.widthX2(widget.width),

// height: ScreenAdapt.widthX2(widget.height),

alignment: Alignment.center,

child: Row(

children: [

Container(

width: ScreenAdapt.widthX2(imageSize.width),

height: ScreenAdapt.heightX2(imageSize.height),

child: image,

),

SizedBox(

width: ScreenAdapt.heightX2(padding),

),

Container(

child: Text(

title,

style: TextStyle(

fontSize: ScreenAdapt.sizeX2(fontSize),

color: textColor,

),

),

),

],

),

),

);

}

}

图片 + 文字按钮 icon在上 文字在下

/*

* iconbutton icon在上 文字在下

*/

class ExamIndexIconButton extends StatelessWidget {

const ExamIndexIconButton({Key key, this.action, this.icon, this.title})

: super(key: key);

final action;

final String icon;

final String title;

@override

Widget build(BuildContext context) {

return GestureDetector(

child: Container(

color: Colors.white.withAlpha(0),

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: [

Container(

width: ScreenAdapt.widthX2(30),

height: ScreenAdapt.widthX2(30),

// color: Colors.green,

child: Image.asset(

icon,

fit: BoxFit.fill,

),

),

Container(

padding: EdgeInsets.only(top: 12, bottom: 12),

child: Text(

title,

style: TextStyle(

fontSize: ScreenAdapt.size(28),

color: Color(0xFF3B3B3B),

),

),

),

],

),

),

onTap: action,

);

}

}

图片 + 文字按钮 tiitle在左 icon在右

/*

*图片 + 文字按钮 tiitle在左 icon在右

*/

class XXClickTitleAndImageBtn extends StatelessWidget {

const XXClickTitleAndImageBtn(

{Key key,

this.image,

this.imageSize,

this.title,

this.padding = 0,

this.fontSize,

this.textColor,

this.onTap})

: super(key: key);

final Widget image; //image

final Size imageSize; //image的宽高

final String title; //文字

final double padding; //图片和文字之间的间距

final double fontSize; //文字的大小

final Color textColor; //文字的颜色

final onTap; //执行的方法

@override

Widget build(BuildContext context) {

return GestureDetector(

onTap: onTap,

child: Container(

// width: ScreenAdapt.widthX2(widget.width),

// height: ScreenAdapt.widthX2(widget.height),

alignment: Alignment.center,

child: Row(

children: [

Container(

child: Text(

title,

style: TextStyle(

fontSize: ScreenAdapt.sizeX2(fontSize),

color: textColor,

),

),

),

SizedBox(

width: ScreenAdapt.heightX2(padding),

),

Container(

width: ScreenAdapt.widthX2(imageSize.width),

height: ScreenAdapt.heightX2(imageSize.height),

child: image,

),

],

),

),

);

}

}