如何在Flutter中反向遮罩一个小部件到另一个小部件的顶部？

我有一个RawMaterialButton如下：

RawMaterialButton(
  onPressed: () {},
  fillColor: Colors.white,
  padding: const EdgeInsets.all(15),
  shape: const CircleBorder(),
  child: Icon(
    Icons.chevron_right,
    size: 35,
    color: context.primaryColor,
  ),
)

它在页面上看起来像这样：

然而，背景是渐变的，而且是动画的，所以它会不断地改变颜色。右V形图标的颜色也应该根据背景而改变颜色。我想也许有一种方法可以把右V形图标用作一种反向遮罩。它应该是透明的，并显示出它的父对象后面的内容。
我还将用包含文本的容器实现同样的设计，其中文本是透明的，并显示其父容器的背景。
在Flutter中是否有一种直接的方法可以做到这一点。
先谢了。
环境
Flutter医生说：

[✓] Flutter (Channel stable, 3.7.0, on Fedora Linux 36 (KDE Plasma) 6.1.8-100.fc36.x86_64, locale en_US.UTF-8)
    • Flutter version 3.7.0 on channel stable at /home/erayerdin/.local/lib/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (11 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /home/erayerdin/.sdks/android/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = /home/erayerdin/.sdks/android
    • Java binary at: /var/lib/snapd/snap/android-studio/125/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 14.0.5 (Fedora 14.0.5-2.fc36)
    • cmake version 3.25.2
    • ninja version 1.10.2
    • pkg-config version 1.8.0

[✓] Android Studio (version 2021.3)
    • Android Studio at /var/lib/snapd/snap/android-studio/125/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code
    • VS Code at /snap/code/current
    • Flutter extension version 3.58.0

[✓] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Linux (desktop)              • linux         • linux-x64      • Fedora Linux 36 (KDE Plasma) 6.1.8-100.fc36.x86_64
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

验证码：

import 'package:flutter/cupertino.dart';
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class GradietnColor extends StatefulWidget {
      const GradietnColor({Key? key}) : super(key: key);
    
      @override
      State<GradietnColor> createState() => _GradietnColorState();
    }
    
    class _GradietnColorState extends State<GradietnColor> {
      List<Color> arrColors = [Colors.green.withOpacity(0.30), Colors.yellow.withOpacity(0.10)] ;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
    
          body: Center(
            child: Stack(
              children: [
    
                Container(
                  height: 200,
                  width: 200,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topRight,
                      end: Alignment.bottomLeft,
                      colors: arrColors,
                    )
                  ),
                ),
    
            Positioned(
              left: 50,bottom: 80,
    
              child: ShaderMask(
                child: RawMaterialButton(
                  onPressed: () {},
                  fillColor: Colors.transparent,
                  padding: const EdgeInsets.all(15),
                  shape: const CircleBorder(),
                  child: Icon(
                    Icons.chevron_right,
                    size: 35,
                  ),
                ),
                  blendMode: BlendMode.srcATop,
                  shaderCallback: (Rect bounds) {
                    return RadialGradient(
                      center: Alignment.topLeft,
                      radius: 1.0,
                      colors: <Color>[Colors.red, Colors.yellow],
                      tileMode: TileMode.mirror,
                    ).createShader(bounds);
                  }
              ),
            )
              ],
            ),
          )
        );
      }
    
    }

如何在Flutter中反向遮罩一个小部件到另一个小部件的顶部？

1条答案

相关问题

热门标签

最新问答