如何在 android 的 flutter 中创建这种线性淡入淡出不透明效果？

Question

您好，我是颤振新手，我想创建这个设计，但我对如何为图像中标记的该文本创建线性不透明阴影效果叠加感到困惑

我圈出的这个图标的名称是什么？

Answer 1

您可以使用带有 LinearGradient 的 CustomPainter：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomPaint(
        foregroundPainter: FadingEffect(),
        //child gets the fading effect
        child: Text(
            'Test text',
            style: TextStyle(color: Colors.black)),
      ),
    );
  }
}

class FadingEffect extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromPoints(Offset(0, 0), Offset(size.width, size.height));
    LinearGradient lg = LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          //create 2 white colors, one transparent
          Color.fromARGB(0, 255, 255, 255),
          Color.fromARGB(255, 255, 255, 255)
        ]);
    Paint paint = Paint()..shader = lg.createShader(rect);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(FadingEffect linePainter) => false;
}