flutter 按钮封装 带图片的按钮,带边框的按钮,纯文字的按

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

只有文字的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,
           ),
         ],
       ),
     ),
   );
 }
}