Flutter實現(xiàn)Text漸變

• 首先展示效果圖

  
  
  image.png

• 自定義GradientText Widget（直接貼代碼）

import 'package:flutter/material.dart';

class GradientText extends StatelessWidget {
 GradientText(this.data,
     {@required this.gradient,
       this.style,
       this.textAlign = TextAlign.left});

 final String data;
 final Gradient gradient;
 final TextStyle style;
 final TextAlign textAlign;

 @override
 Widget build(BuildContext context) {
   return ShaderMask(
     shaderCallback: (bounds) {
       return gradient.createShader(Offset.zero & bounds.size);
     },
     child: Text(
       data,
       textAlign: textAlign,
       style: (style == null)
           ? TextStyle(color: Colors.white)
           : style.copyWith(color: Colors.white),
     ),
   );
 }
}

• 使用

ListTile getTitleItem(HeadingItem item, BuildContext context) {
    return new ListTile(
        title: new GestureDetector(
      child: new GradientText(
        item.heading,
        textAlign: TextAlign.left,
        gradient: LinearGradient(colors: [Colors.redAccent, Colors.green]),
        style: TextStyle(
          fontSize: 30.0,
        ),
      ),
      onTap: () {
        Navigator.push(
          context,
          new MaterialPageRoute(builder: (context) => new HomePage()),
        );
      },
    ));
  }