如何在不使用任何插件的情况下添加2个音调图标?

问题描述 投票:0回答:1

我不想在我的应用程序中为一个图标添加任何插件,但我需要两个音调,因为背景颜色会有所不同,我不知道什么时候它会变暗,什么时候会变亮。

我的意思是像这样的图标 - https://material.io/tools/icons/?style=twotone图标有不同颜色的边框。

flutter icons material-design
1个回答
0
投票

如果我正确理解你的问题,这里有两个色调IconText的例子。

您可以使用颜色,半径和其他参数来满足您的需求。

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ShaderMask(
              blendMode: BlendMode.srcATop,
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 1.0,
                  colors: <Color>[Colors.red, Colors.cyanAccent],
                  tileMode: TileMode.mirror,
                ).createShader(bounds);
              },
              child: Text(
                'Two Tone Color Icon & Text!',
                style: TextStyle(fontSize: 22.0),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            ShaderMask(
              blendMode: BlendMode.srcATop,
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.center,
                  radius: 1.0,
                  colors: <Color>[
                    Colors.greenAccent[200],
                    Colors.blueAccent[200]
                  ],
                  tileMode: TileMode.repeated,
                ).createShader(bounds);
              },
              child: Icon(
                Icons.dashboard,
                size: 32.0,
              ),
            ),
          ],
        ),
      ),

输出:enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.