flutter gradient helper

Enter your values below to compute instant, accurate, client-side results.

First Color (Hex)

Second Color (Hex)

Flutter LinearGradient Code

Advertisement (320x50) Advertisement (728x90)

How to Use the flutter gradient helper

Enter your input parameters into the specified field.
The system evaluates results instantly as you type (no buttons or loading indicators).
Click "Copy Result" to write the output directly to your clipboard.

Frequently Asked Questions & Guide

How do gradients work in Flutter?

In Flutter, gradients are defined using the `Gradient` class, with `LinearGradient`, `RadialGradient`, and `SweepGradient` as the primary types. They are typically applied inside a `BoxDecoration`.

What is the hex format used by Flutter Color?

Flutter uses the `Color(0xAARRGGBB)` format, where AA is the alpha (opacity) value, followed by red, green, and blue. This helper sets alpha to 0xFF (fully opaque) by default.

Can I customize the gradient direction?

Yes, you can specify `begin` and `end` properties on your `LinearGradient` in Flutter (e.g., `begin: Alignment.topLeft`, `end: Alignment.bottomRight`).