用 Flutter 水一个可丑的渐变首页（一）

看我有渐变色！

缘起

这两天下载了一个叫《卡片日记》的爱啪啪，看着还有点小清新呢，赶忙抄一个。 嗯，做为一个21世纪的新青年怎么能不会用渐变？对渐变要，抄起来抄起来！

呵呵呵~ 抄成这个样子也是醉了。。。

渐变字体组件搞起来

这个简单，给文字加这遮罩嘛，哈哈：

/// 随便写写，反正我很菜

class GradientText extends StatelessWidget {
  GradientText({
    @required this.gradient,
    this.text,
    this.style,
    this.iconData,
    this.iconSize,
  })  : assert(text == null || iconData == null, 'text 和 iconData 只能填一个');

  final String text;
  final TextStyle style;
  final IconData iconData;
  final double iconSize;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bound) => gradient.createShader(Offset.zero & bound.size),
      child: text != null
          ? Text(text, style: style == null ? TextStyle(color: Colors.white) : style.copyWith(color: Colors.white))
          : Icon(iconData, size: iconSize, color: Colors.white),
    );
  }
}
复制代码

什么，你问我传iconData干什么，iconData也是字体啊，呵呵呵~ 感受这篇要写完了啊，有点短。。 再补一点

底部导航栏

底部直接用BottomAppBar好了，否则那个刘海还要本身画，忒麻烦，这里用上上面的GradientText组件，

DecoratedBox(
    decoration: BoxDecoration(boxShadow: [
      BoxShadow( // 阴影效果
        color: Color.fromARGB(100, 200, 200, 200),
        blurRadius: 8,
      )
    ]),
    child: ClipRRect( // 剪出两个圆角
        borderRadius: BorderRadius.only(topRight: Radius.circular(20), topLeft: Radius.circular(20)),
          child: BottomAppBar(
            elevation: 0,
            notchMargin: 6,
            shape: CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(
                  icon: GradientText(
                    iconData: Icons.note_add,
                    iconSize: 26,
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: StaticStyle.linerColor[widget.homeProvider.curPage],
                    ),
                  ),
                  onPressed: () {},
                ),
                Text(''),
                IconButton(
                  icon: GradientText(
                    iconData: Icons.person,
                    iconSize: 26,
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.black54,
                        Colors.black,
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
    )
复制代码

还有悬浮的，添加按钮，也用上渐变

Container(
    width: 56,
    height: 56,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: StaticStyle.linerColor[widget.homeProvider.curPage],
      ),
      boxShadow: [
        BoxShadow(
          color: Color.fromARGB(100, 87, 211, 255),
          blurRadius: 8,
        )
      ],
    ),
    child: Icon(Icons.add, color: Colors.white),
  )
复制代码

这个时候，若是滚动上面的pageview，tab的渐变色是不会跟着变的，怎样让它动起来呢，下节继续~