🚀 Icon with gradient (CUSTOM WIDGET)

Hey community! 👋

I needed a way to apply cool gradients directly to icons in my fitness app, and I thought I'd share this custom widget I created with all of you.

What it does

This widget applies a linear gradient to any icon, allowing you to create visually striking icons without using SVGs or complicated code. Perfect for highlighting important features in your app

How to use it

Just add this as a custom widget in your FlutterFlow project and add your parameters.

Parameter Guide

width/height: Size of the container (optional)
icon: Any Flutter widget (typically an Icon)
color1, color2, color3: Required colors for the gradient
color4: Optional fourth color (ignored if null)
angle: Direction of gradient in degrees (0-360, optional)
action: Function to execute when tapped (optional)

Feel free to customize it for your own needs! Hope this helps someone out there. 🚀

Let me know if you use it in your project!

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/actions/actions.dart' as action_blocks;
import 'package:ff_theme/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
import 'dart:math' as math;
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class GradientIcon extends StatefulWidget {
  const GradientIcon({
    super.key,
    this.width,
    this.height,
    required this.icon,
    required this.color1,
    required this.color2,
    required this.color3,
    this.color4,
    this.action,
    this.angle,
  });
  
  final double? width;
  final double? height;
  final Widget icon;
  final Color color1;
  final Color color2;
  final Color color3;
  final Color? color4;
  final Future Function()? action;
  final double? angle;
  
  @override
  State<GradientIcon> createState() => _GradientIconState();
}

class _GradientIconState extends State<GradientIcon> {
  @override
  Widget build(BuildContext context) {
    // Determine colors to use for gradient
    final List<Color> gradientColors = [
      widget.color1,
      widget.color2,
      widget.color3,
    ];
    
    // Add color4 only if not null
    if (widget.color4 != null) {
      gradientColors.add(widget.color4!);
    }
    
    // Calculate stops based on number of colors
    final List<double> stops = gradientColors.length == 3
        ? [0.0, 0.5, 1.0]
        : [0.0, 0.33, 0.66, 1.0];
    
    // Calculate gradient positions based on angle
    final double angle = widget.angle ?? 0.0;
    final double angleInRadians = (angle * math.pi) / 180;
    
    // Convert angle to begin and end positions
    final Alignment begin = Alignment(
      math.cos(angleInRadians + math.pi) * 0.5 + 0.5,
      math.sin(angleInRadians + math.pi) * 0.5 + 0.5,
    );
    
    final Alignment end = Alignment(
      math.cos(angleInRadians) * 0.5 + 0.5,
      math.sin(angleInRadians) * 0.5 + 0.5,
    );
    
    // Create base widget with gradient
    Widget gradientWidget = ShaderMask(
      blendMode: BlendMode.srcIn,
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: gradientColors,
          stops: stops,
          begin: begin,
          end: end,
        ).createShader(bounds);
      },
      child: SizedBox(
        width: widget.width,
        height: widget.height,
        child: widget.icon,
      ),
    );
    
    // If action is defined, wrap in GestureDetector
    if (widget.action != null) {
      return GestureDetector(
        onTap: () async {
          await widget.action!();
        },
        child: gradientWidget,
      );
    }
    
    // Otherwise return just the gradient widget
    return gradientWidget;
  }
}