Flutter通用UI之Button

示例图：

功能描述：

按钮支持渐变色，按钮宽高定制，字体大小，字体颜色，边框颜色，按钮圆角，按钮图标，按钮图标、宽高定制，按钮文字与图标位置，按钮与图标间距定制

代码

import 'package:flutter/material.dart';

enum Position { TOP, BOTTOM, LEFT, RIGHT }

class GradientButton extends StatelessWidget {
  final List<Color> colors; //渐变色色值
  final double width; //按钮宽度
  final double height; //按钮高度
  final Color textColor; //按钮字体色值
  final double textSize; //按钮字体大小
  final double radius; //按钮圆角
  final String imagePath; //按钮图标
  final double imageWidth; //按钮图标宽度
  final double imageHeight; //按钮图标高度
  final double marge; //图标与文字间距
  final String text; //文字
  int position = -1; //图标位置
  final Color borderColor; //边框
  double _marge;
  VoidCallback onTap;

  GradientButton(
      {this.colors,
      this.width,
      this.height,
      this.textColor,
      this.textSize,
      this.radius,
      this.position,
      this.imagePath,
      this.imageWidth,
      this.imageHeight,
      this.marge,
      this.borderColor,
      @required this.text,
      this.onTap});

  @override
  Widget build(BuildContext context) {
    List<Color> _colors = colors ?? [Color(0xFFE251), Color(0xFDD108)];
    _marge = marge ?? 2;
    var _borderColor = borderColor ?? Colors.transparent;
    return GestureDetector(
      onTap: () {
        onTap();
      },
      child: DecoratedBox(
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: _colors),
            borderRadius: BorderRadius.circular(radius ?? 8),
            border: Border.all(color: _borderColor, width: 1)),
        child: ConstrainedBox(
          constraints: BoxConstraints.tightFor(width: width, height: height),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: DefaultTextStyle(
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: textSize,
                    color: textColor),
                child: _buildButtonWidget(),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildButtonWidget() {
    if (Position.LEFT.index == position) {
      return _buildLeftImageButton();
    } else if (Position.RIGHT.index == position) {
      return _buildRightImageButton();
    } else if (Position.TOP.index == position) {
      return _buildTopImageButton();
    } else if (Position.BOTTOM.index == position) {
      return _buildBottomImageButton();
    } else {
      return _buildButtonNoImage();
    }
  }

  Widget _buildLeftImageButton() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(0, 0, _marge, 0),
          child: Image.asset(
            imagePath,
            height: imageHeight,
            width: imageWidth,
          ),
        ),
        Text(text)
      ],
    );
  }

  Widget _buildRightImageButton() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(text),
        Padding(
          padding: EdgeInsets.fromLTRB(_marge, 0, 0, 0),
          child: Image.asset(
            imagePath,
            height: imageHeight,
            width: imageWidth,
          ),
        ),
      ],
    );
  }

  Widget _buildTopImageButton() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(0, 0, 0, _marge),
          child: Image.asset(
            imagePath,
            height: imageHeight,
            width: imageWidth,
          ),
        ),
        Text(text)
      ],
    );
  }

  Widget _buildBottomImageButton() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(text),
        Padding(
          padding: EdgeInsets.fromLTRB(0, _marge, 0, 0),
          child: Image.asset(
            imagePath,
            height: imageHeight,
            width: imageWidth,
          ),
        ),
      ],
    );
  }

  Widget _buildButtonNoImage() {
    return Text(text);
  }
}

demo

import 'package:flutter/material.dart';
import 'GradientButton.dart';

class GradientButtonRoute extends StatefulWidget {
  @override
  _GradientButtonRouteState createState() => _GradientButtonRouteState();
}

class _GradientButtonRouteState extends State<GradientButtonRoute> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: GradientButton(
              colors: [Color(0xffFFE251), Color(0xffFDD108)],
              height: 60.0,
              width: 100,
              textColor: Colors.red,
              textSize: 10,
              text: "上",
              position: Position.TOP.index,
              imagePath: "images/icons/icon_man.png",
              imageHeight: 20,
              imageWidth: 20,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: GradientButton(
              colors: [Color(0xffFFE251), Color(0xffFDD108)],
              height: 60.0,
              width: 100,
              textColor: Colors.red,
              textSize: 10,
              text: "下",
              position: Position.BOTTOM.index,
              imagePath: "images/icons/icon_man.png",
              imageWidth: 20,
              imageHeight: 20,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: GradientButton(
              colors: [Color(0xffFFE251), Color(0xffFDD108)],
              height: 50.0,
              width: 100,
              textColor: Colors.red,
              textSize: 20,
              text: "左",
              position: Position.LEFT.index,
              imagePath: "images/icons/icon_man.png",
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: GradientButton(
              colors: [Color(0xffFFE251), Color(0xffFDD108)],
              height: 50.0,
              width: 100,
              textColor: Colors.red,
              textSize: 20,
              radius: 5,
              text: "右",
              position: Position.RIGHT.index,
              imagePath: "images/icons/icon_man.png",
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: GradientButton(
              colors: [Color(0xffFFE251), Color(0xffFDD108)],
              height: 50.0,
              width: 100,
              textColor: Colors.red,
              textSize: 20,
              text: "正常",
              borderColor: Colors.black,
              onTap: () {
                print("00000");
              },
            ),
          ),
        ],
      ),
    );
  }
}

属性含义

属性名称	含义
colors	按钮背景色(支持渐变色)
width	按钮宽度
height	按钮高度
textColor	按钮字体颜色
textSize	按钮字体大小
radius	按钮圆角角度
imagePath	按钮图标
imageWidth	按钮图标宽度
imageHeight	按钮图标高度
marge	图标与文字之间间距
text	按钮文字
position	图标位于文字的位置（Position.Left.index,Position.RIGHT.index,Position.TOP.index,Position.BOTTOM.index）
borderColor	边框色值
onTap	按钮点击事件

Demo