如何在 Flutter for android 中创建这种线性渐变不透明度效果？

Posted 2023-02-23

【中文标题】如何在 Flutter for android 中创建这种线性渐变不透明度效果？

【英文标题】：How to create this linear fading opacity effect in flutter for android?

【发布时间】：2020-10-28 02:50:49

【问题描述】：

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

我圈出来的这个图标叫什么名字？

【问题讨论】：

也许你想要这个codepen.io/mhadaily/pen/YzwaJeY

非常感谢...您解决了我的问题

我还问了那些图标

【参考方案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;

【讨论】：

非常感谢你的回答......你真棒......

【参考方案2】：

您可以使用 ShaderMask 来实现这一点，下面我提供了一个可以模糊垂直边缘或水平边缘的示例。

class FadedEdges extends StatelessWidget 
  const FadedEdges(
      Key? key,
      required this.child,
      this.colors,
      this.stops,
      this.isHorizontal = false)
      : super(key: key);
  final Widget child;
  final List<Color>? colors;
  final List<double>? stops;
  final bool isHorizontal;

  @override
  Widget build(BuildContext context) 
    return ShaderMask(
            blendMode: BlendMode.dstOut,
            shaderCallback: (Rect rect) => LinearGradient(
                    colors: colors ??
                        [
                          Colors.white.withOpacity(0.80),
                          Colors.transparent,
                          Colors.transparent,
                          Colors.white.withOpacity(0.80)
                        ],
                    stops: stops ?? const [0.1, 0.15, 0.85, 1.0],
                    begin: !isHorizontal
                        ? Alignment.topCenter
                        : Alignment.centerLeft,
                    end: !isHorizontal
                        ? Alignment.bottomCenter
                        : Alignment.centerRight)
                .createShader(rect),
            child: child)
        ;
  

【参考方案3】：

容器也有渐变...所以易于使用请检查此代码...并将颜色设置为colors.Transparent

    Container(
          width: double.infinity,
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.green,Colors.red],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              )
          ),
        )