CODEWITHSUNDEEP
flutterdart
Mateus99
Mateus99

Reputation: 129

How to apply Gradient filter to an Icon?

I need to put a gradient on my Icon.

How do I achieve this?

Upvotes: 6

Views: 5508

Answers (2)

Adelina
Adelina

Reputation: 11921

You can also do this:

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

enter image description here

Upvotes: 1

Matt S.
Matt S.

Reputation: 10462

One way to do this is to use a ShaderMask widget. If you wrap an icon with this, you can apply any gradient you like:

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,
    );
  }
}

giving you something like looks like this:

enter image description here

Upvotes: 14

Related Questions