Flutter Gradient Generator

Create linear, radial, and sweep gradients for Flutter applications with a visual editor.

Preview

Flutter Code

Features

  • Generate Linear, Radial, and Sweep gradients for Flutter.
  • Interactive visual preview closest to CSS representation.
  • Customizable start and end alignments.
  • Adjustable color stops and tile modes.
  • Instant Dart code generation ready to copy-paste.

How to Use

  1. Select the type of gradient you want to create (Linear, Radial, Sweep).
  2. Add or remove colors using the (+) and trash buttons.
  3. Use the color pickers to choose your colors and the sliders to adjust their stops.
  4. For Linear gradients, set the Begin and End alignment.
  5. For Radial gradients, adjust the radius.
  6. The preview updates in real-time. Copy the generated code into your Flutter `BoxDecoration`.