Colors in Flutter

Colors in Flutter: introduction

Colors in Flutter are represented by the immutable Color class, most often created from a hexadecimal literal, the built-in Colors swatch class, or an app's ColorScheme.

Key facts at a glance

• Color(0xAARRGGBB) creates a color from a hexadecimal ARGB value. For example, the leading FF in Color(0xFFRRGGBB) represents a fully opaque alpha channel.
• Colors provides Material's named swatches, like Colors.deepPurple or Colors.deepPurple.shade200.
• withOpacity() is deprecated in favor of withValues(alpha: ...), which avoids precision loss.
• ColorScheme.fromSeed generates a full ColorScheme from a single seed color, with colors designed to work together and meet contrast requirements.
• ColorTween interpolates between two colors and can be driven by an AnimationController.

How do I convert a hex value to a Flutter Color?

Color(0xAARRGGBB) accepts a hexadecimal ARGB value directly. For example, FF is the alpha channel, while 3B82F6 represents the RGB components:

const brandBlue = Color(0xFF3B82F6); // FF = fully opaque, 3B82F6 = RGB

For a hex string without the alpha prefix, such as one copied from a design tool, parse it and add the alpha manually: Color(int.parse('FF$hex', radix: 16)).

How do I set opacity and animate color in Flutter?

withValues(alpha: ...) sets opacity on an existing color; ColorTween interpolates between two colors over an animation.

import 'package:flutter/material.dart';

class ColorFadeButton extends StatefulWidget {
  const ColorFadeButton({super.key});

  @override
  State<ColorFadeButton> createState() => _ColorFadeButtonState();
}

class _ColorFadeButtonState extends State<ColorFadeButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 400),
  );
  late final Animation<Color?> _color = ColorTween(
    begin: Colors.blue,
    end: Colors.green,
  ).animate(_controller);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _color,
      builder: (context, child) {
        return ElevatedButton(
          onPressed: () => _controller.forward(),
          style: ElevatedButton.styleFrom(backgroundColor: _color.value),
          child: const Text('Confirm'),
        );
      },
    );
  }
}

Colors.blue.withValues(alpha: 0.5) sets the alpha value for a static color. When a color needs to transition smoothly between two values, ColorTween can be used to interpolate between them over an animation.

Best practices

1. Use withValues(alpha: ...), not the deprecated withOpacity(), for setting transparency on a color.
2. Use ColorScheme.fromSeed to generate a cohesive palette rather than picking dozens of individual hex values by hand.
3. Define brand colors centrally and expose theme-dependent colors through the app's theme, rather than scattering hex literals throughout the codebase. This makes rebranding easier and allows colors to adapt consistently across different themes.
4. Use ColorTween with an AnimationController when you need explicit control over color animation; for simpler cases, Flutter's implicit animation widgets may be a better fit than manually calling setState.
5. Check contrast in both light and dark themes for any custom color, since a value tuned for one often reads poorly in the other.

Common mistakes

• Using the deprecated withOpacity() instead of withValues(alpha: ...). Prefer withValues(alpha: ...) to preserve the full precision of the color's alpha value.
• Forgetting the alpha channel in a hex color, writing Color(0x3B82F6) instead of Color(0xFF3B82F6). Flutter interprets color values as 0xAARRGGBB, so the former has an alpha value of 00 and is fully transparent.
• Manually managing color animation with repeated setState calls when an animation API such as ColorTween or an implicit animation widget would be a better fit.
• Hardcoding hex values across many widgets instead of centralizing them in theme values or named constants.