How can I add 2 tone icons without using any plugin?

Question

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.

not able to understand your question, are you want to add tone icon in app? — Nirav Bhavsar, Jan 08 '19 at 07:51
I think I wasn't clear, I have edited my question. Hope it is clear now :) — Keerti Purswani, Jan 08 '19 at 10:45
try to stack two icons with the one below (the one that acts as edge) a little bigger than the top. — Mamnarock, Jan 08 '19 at 16:07
It's still under development, you can check the progress of the issue here: https://github.com/flutter/flutter/issues/18384 — Amruth Pillai, Mar 21 '20 at 07:58
How about [this answer](https://stackoverflow.com/a/60580826/638153) by @FJCG which suggests using a `CircleAvatar`. — Keith DC, Jun 19 '21 at 06:43

score 3 · Answer 1 · answered Jan 08 '19 at 08:22

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:

Hey, I didn't know this was possible. Thanks for replying but what I needed was a simple border to my icons. I think I wasn't clear in the question. — Keerti Purswani, Jan 08 '19 at 10:47
@KeertiPurswani - I guess that wont be possible as such - without using external plugin. — anmol.majhail, Jan 09 '19 at 06:20

How can I add 2 tone icons without using any plugin?

1 Answers1

Linked