flutter - 渐变 LineGradient

定义 Gradient 的两种方式

方式一,widget形式：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment(0.8, 0.0), // 10% of the width, so there are ten blinds.
      colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)], // whitish to gray
      tileMode: TileMode.repeated, // repeats the gradient over the canvas
    ),
  ),
)

方式二,函数形式(灵活&复杂)：

class Sky extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    var gradient = RadialGradient(
      center: const Alignment(0.7, -0.6),
      radius: 0.2,
        Colors.white,
        Colors.black,
        Colors.red,
      stops: [0.4, 1.0],
    );
    canvas.drawRect(
      rect,
      Paint()..shader = gradient.createShader(rect),
    );
  }
  @override
  bool shouldRepaint(Sky oldDelegate) => false;
  @override
  bool shouldRebuildSemantics(Sky oldDelegate) => false;
}
///调用
CustomPaint(
  size: Size(300, 300), //指定画布大小
  painter: Sky(),
);

tileMode 三种模式值解释

tileMode: 在渐变定义的区域外，线性渐变是怎样表现得。

• TileMode.clamp (默认值) 使用纯色渲染渐变范围外得区域，将取 colors数组中最后一项的颜色作为渲染色。
  
• TileMode.mirror 使用镜像模式渲染渐变范围外得区域，将取 colors数组中的值，从第一项渐变到到最后一项，然后再继续从最后一项渐变到第一项，如此循环。

• TileMode.repeat 使用重复模式渲染渐变范围外得区域，将取 colors数组中的值，从第一项渐变到到最后一项，然后再继续从第一项渐变到最后一项，如此循环。
  

渐变按钮

import 'package:flutter/material.dart';

/**
 * 使用方法
    GradientButton(
      text: '确定',
      width: 160,
      height: 86,
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
      colors: [HexToColor('#FF696A'), HexToColor('#FF894A')], // 可以为单色
      onPressed: () {
        model.submit(fieldController.text);
      },
    ),          
 */
// 自定义按钮
class GradientButton extends StatelessWidget {
  GradientButton({
    this.colors,
    this.width,
    this.height,
    this.style,
    this.prefixIcon,
    this.onPressed,
    this.borderRadius,
    @required this.text,
  });

  // 渐变色数组
  final List<Color> colors;

  // 按钮宽高
  final double width;
  final double height;

  final String text;
  final TextStyle style;
  final Widget prefixIcon;
  final BorderRadius borderRadius;

  //点击回调
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    final List<Color> _colors = this.colors ?? List();

    Color _backgroundColors; // 单色
    LinearGradient _linearGradient; // 渐变色

    if (_colors.isEmpty) {
      _backgroundColors = theme.primaryColorDark ?? theme.primaryColor;
      _linearGradient = null;
    } else if (_colors.length == 1) {
      _backgroundColors = _colors[0];
      _linearGradient = null;
    } else {
      _backgroundColors = null;
      _linearGradient = LinearGradient(colors: _colors);
    }

    return Container(
        width: this.width ?? 90.0,
        height: this.height ?? 36.0,
        decoration: BoxDecoration(
          color: _backgroundColors,
          gradient: _linearGradient,
          borderRadius: borderRadius ?? BorderRadius.circular(25),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            null == this.prefixIcon ? SizedBox() : this.prefixIcon,
            RaisedButton(
              color: Colors.transparent, // 设为透明色
              elevation: 0, // 正常时阴影隐藏
              highlightElevation: 0, // 点击时阴影隐藏
              //点击时，水波动画中水波的颜色
              splashColor: Colors.black12,
              //内边距
              padding: EdgeInsets.zero,
              onPressed: () {
                onPressed();
              },
              child: Container(
                alignment: Alignment.center,
                child: Text(
                  text,
                  style: style ??
                      TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                ),
              ),
            ),
          ],
        ));
  }
}



/// 使用： HexToColor("#333333")
class HexToColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    // 如果传入的十六进制颜色值不符合要求，返回默认值
    if (hexColor == null ||
        hexColor.length != 6 ||
        int.tryParse(hexColor.substring(0, 6), radix: 16) == null) {
      hexColor = '103580';
    }
    hexColor = "FF" + hexColor;
    return int.parse(hexColor, radix: 16);
  }

  HexToColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<