Flutter Gradient Generator - Flutter 渐变代码生成工具

Flutter Gradient Generator 是一个专为 Flutter 开发者设计的在线渐变生成工具，支持线性、径向和扫描三种渐变类型，帮助开发者快速生成美观的渐变代码。

工具简介

Flutter Gradient Generator 由开发者 Victor Eronmosele 创建，是一个开源的 Web 应用。该工具提供了直观的可视化界面，让开发者可以通过拖拽控件和颜色选择器轻松创建自定义渐变，并一键复制生成的 Flutter 代码。

核心功能

支持的渐变类型

• 线性渐变 (Linear Gradient)：最常用的渐变类型，支持 8 个方向预设（左上、上中、右上、左中、居中、右中、左下、下中、右下）以及自定义角度
• 径向渐变 (Radial Gradient)：从中心点向外扩散的圆形渐变效果
• 扫描渐变 (Sweep Gradient)：围绕中心点旋转的渐变效果，类似于圆锥渐变

颜色配置

• 多颜色支持：可添加多个颜色节点创建复杂渐变
• 颜色停靠点 (Color Stops)：精确控制每种颜色的位置和过渡
• 内置调色板：提供来自 uiGradients 的精选渐变预设

代码生成

• 一键复制生成的 Flutter 代码
• 代码格式规范，可直接粘贴到项目中使用
• 支持 LinearGradient、RadialGradient、SweepGradient 三种 Widget

使用示例

线性渐变代码

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xFF667EEA),
        Color(0xFF764BA2),
      ],
    ),
  ),
)

径向渐变代码

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      center: Alignment.center,
      radius: 0.5,
      colors: [
        Color(0xFFF093FB),
        Color(0xFFF5576C),
      ],
    ),
  ),
)

其他推荐工具

Craftor Gradient Maker

• 支持拖拽控件调整渐变
• 直观的可视化操作界面
• 开源项目，MIT 许可证

JustInBrowser Color & Gradient Converter

• 支持多平台代码转换（Flutter、CSS、React Native、SwiftUI、Android、iOS）
• 8 个方向选项
• 实时预览功能

相关 Flutter 包

gradient_generator

提供流畅的 API 和预置渐变：

GradientX.linear(
  colors: [Colors.red, Colors.blue],
  angle: 45,
)

gradient_like_css

支持 CSS 风格的渐变语法：

linearGradient('45deg, red, blue')

mesh_gradient

创建流体风格的网格渐变效果，支持复杂动画。

项目链接

• 在线工具: https://fluttergradientgenerator.com
• GitHub 仓库: https://github.com/victoreronmosele/flutter_gradient_generator
• 许可证: GPL-3.0