How to use a custom colour gradient Icon in Flutter example

In Flutter, the Icon widget is used to display a graphic symbol. It can be used as a standalone icon, or in combination with text.

Here’s an example of how to use the Icon widget in Flutter:

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 24.0,
)

The Icon widget takes a few parameters:

Icons.favorite: The icon to display. In this case, it’s the “favorite” icon from Flutter’s built-in icon set.
color: The colour to use for the icon.
size: The size of the icon in logical pixels.

There are many other options available for customizing the appearance and behaviour of the Icon widget. For example, you can use the semanticLabel parameter to provide a text label for the icon for accessibility purposes.

What is a colour gradient Icon?

A colour gradient icon is an icon that uses a gradient of colours to create a visual effect that smoothly transitions from one colour to another. The icon can be any shape or symbol, but the gradient effect adds depth and dimensionality to the icon, making it more visually appealing and interesting.

Colour gradient icons are commonly used in user interfaces and design, as they can help draw attention to important elements or create a sense of hierarchy within a layout. They can also be used to add visual interest and variety to a design, and to evoke a particular mood or feeling through the use of colour.

How to add the colour gradient to the icon in Flutter

To add a colour gradient to the icon you can use ShaderMask. The ShaderMask widget is used to apply a colour filter to its child widget. The colour filter is defined using a Shader, which is a graphical operation that is applied to the pixels of the child widget.

One common use case for ShaderMask is to apply a gradient to a widget, as an alternative to using a BoxDecoration with a gradient background.

Here’s an example of how to use the ShaderMask widget to apply a gradient to an Icon widget:

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.red, Colors.orange],
    ).createShader(bounds);
  },
  child: Icon(
    Icons.favorite,
    color: Colors.white,
    size: 60.0,
  ),
)

In this example, we’re using the LinearGradient class to define the gradient, and the createShader method to create a Shader from the gradient. We pass this Shader to the shaderCallback parameter of the ShaderMask widget, which defines the colour filter to be applied to the child widget.

The ShaderMask widget can be used to apply other types of colour filters as well, such as colour blending or colour matrix transformations. You can learn more about the available options for customizing the colour filter in the official Flutter documentation:

https://api.flutter.dev/flutter/widgets/ShaderMask-class.html

Create a custom GradientIcon widget in Flutter

To convert this to the second code, a new custom widget named GradientIcon is created. This widget takes in the icon to be displayed, as well as the size of the icon and a gradient that defines the colour gradient to be used.

class GradientIcon extends StatelessWidget {
  GradientIcon(
      this.icon,
      this.size,
      this.gradient,
      );

  final IconData icon;
  final double size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size * 1.2,
        height: size * 1.2,
        child: Icon(
          icon,
          size: size,
          color: Colors.white,
        ),
      ),
      shaderCallback: (Rect bounds) {
        final Rect rect = Rect.fromLTRB(0, 0, size, size);
        return gradient.createShader(rect);
      },
    );
  }
}

In the build method of the GradientIcon widget, a new SizedBox is created that is slightly larger than the specified size of the icon. The Icon widget is then placed inside this SizedBox, and the ShaderMask widget is applied with a shaderCallback that creates a Rect with the specified size and applies the gradient to it.

By creating a custom widget for the gradient icon, the code becomes more reusable and easier to read and maintain. It also provides more flexibility in terms of the icon and gradient that can be used, as the widget can be easily customized to meet specific design needs.

How to use the GradientIcon widget in Flutter

To use the GradientIcon custom widget in your Flutter application, you can follow these steps:

Add the GradientIcon class to your project by copying the code into a new Dart file or by importing the file where the GradientIcon class is defined.
Create an instance of the GradientIcon widget by passing in the required parameters, icon, size, and gradient.

For example, to create a GradientIcon with the favorite icon and a red-to-yellow gradient, you can write:

GradientIcon(
  Icons.favorite,
  60.0,
  LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.red, Colors.yellow],
  ),
)

Use the GradientIcon widget in your application by placing it inside a container, a row, a column, or any other layout widget.

For example, to display the GradientIcon widget in the centre of the screen, you can write:

Center(
  child: GradientIcon(
    Icons.favorite,
    250.0,
    LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.red, Colors.yellow],
    ),
  ),
)

That’s it! With these steps, you can easily use the GradientIcon custom widget in your Flutter application and customize it with different icons and gradients to create beautiful and unique designs.

Customize GradientIcon widget

You can further customize the GradientIcon widget by adding some additional functionality and properties:

Add a tooltip: You can add a tooltip to the Icon widget inside the GradientIcon widget by setting the tooltip property to a string value. This will display a tooltip when the user hovers over the icon.
Add a semantic label: You can add a semantic label to the Icon widget inside the GradientIcon widget by setting the semanticLabel property to a string value. This will provide accessibility information to users who rely on screen readers.
Add an onTap callback: You can add an onTap callback to the Icon widget inside the GradientIcon widget to handle tap events. For example, you can navigate to a different screen when the user taps the icon.
Add a borderRadius property: You can add a borderRadius property to the main Container widget inside the GradientIcon widget to add rounded corners to the container that holds the icon. This can give the icon a more polished look.

class GradientIcon extends StatelessWidget {
  final IconData icon;
  final double? size;
  final Gradient gradient;
  final VoidCallback? onTap;

  const GradientIcon({
    required this.icon,
    this.size = 20,
    required this.gradient,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.all(Radius.circular(30)),
      ),
      child: GestureDetector(
        onTap: onTap,
        child: Tooltip(
          message: 'Favorite Icon',
          child: Semantics(
            label: "Favorite Icon",
            child: ShaderMask(
              child: Icon(
                icon,
                size: size,
                color: Colors.white,
              ),
              shaderCallback: (Rect bounds) {
                final Rect rect = Rect.fromLTRB(0, 0, size!, size!);
                return gradient.createShader(rect);
              },
            ),
          ),
        ),
      ),
    );
  }
}

These are just a few examples of the functionality and properties that you can add to the GradientIcon widget to enhance its capabilities and appearance. You can customize the GradientIcon widget in a variety of ways to fit the needs of your application.

You can read more about colour gradients here: How do you add a gradient background colour in Flutter?