用 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的漸變色是不會跟着變的，怎樣讓它動起來呢，下節繼續~