Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/dart/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Flutter 如何将渐变过滤器应用于图标?_Flutter_Dart - Fatal编程技术网

Flutter 如何将渐变过滤器应用于图标?

Flutter 如何将渐变过滤器应用于图标?,flutter,dart,Flutter,Dart,我需要在我的图标上加一个渐变 如何实现这一点?一种方法是使用ShaderMask小部件。如果使用此图标包装图标,则可以应用任意渐变: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Materi

我需要在我的
图标上加一个渐变


如何实现这一点?

一种方法是使用ShaderMask小部件。如果使用此图标包装图标,则可以应用任意渐变:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: LinearGradientMask(
            child: Icon(
              Icons.book,
              size: 250,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

class LinearGradientMask extends StatelessWidget {
  LinearGradientMask({this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1,
          colors: [Colors.blue, Colors.red],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      child: child,
    );
  }
}
给你这样的东西:

您也可以这样做:

          Container(
            height: 50,
            width: 50,
            child: Icon(Icons.error, color: Colors.white),
            decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.yellow, Colors.black])),
          ),

这对我来说很有效,但当我改变图标的位置时,渐变会稍微改变,着色器任务的起始参考点是什么?难道它不应该是相同的梯度吗?不管图标在哪里?捕捉得好!我查看了一下,发现flifter sdk中有一个错误,导致掩码偏移错误,导致掩码根据屏幕上的位置而改变。我提交了一份PR()来修复它。有希望地