如何在不使用任何插件的情况下添加2个音调图标? [英] How can I add 2 tone icons without using any plugin?

问题描述

我不想为我的应用程序中的一个图标添加任何插件，但是我需要两种色调，因为背景颜色会有所不同，我也不知道何时会变暗，何时会变亮.

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

解决方案

如果我正确理解了您的问题，以下是两个色调Icon&的示例. Text.

您可以玩玩Color，radius&其他参数以满足您的需求.

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,
              ),
            ),
          ],
        ),
      ),

输出:

I don't want to add any plugins just for one icon in my app but I need two tone because the background color will vary and I don't know when it will be dark and when it will be light.

I mean icons like these - https://material.io/tools/icons/?style=twotone where icons have border of different color.

解决方案

If i understood your Question Correctly, here is an example of two Color Tone Icon & Text.

You can play around with Color, radius & other Parameters to fit your Needs.

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,
              ),
            ),
          ],
        ),
      ),

Output:

这篇关于如何在不使用任何插件的情况下添加2个音调图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！