Flutter Gradient Generator

fluttergradientgenerator.com

Flutter Gradient Generator is a web app that generates linear, radial and sweep gradients for Flutter widgets.

Usage

1. Visit the web app.

2. Choose the gradient style.

   The options are:

   • linear
   • radial
   • sweep

3. Choose the gradient direction.

   The options are:

   • top-left
   • top-center
   • top-right
   • center-left
   • center (not applicable for linear gradient)
   • center-right
   • bottom-left
   • bottom-center
   • bottom-right
   • custom

4. Choose the gradient colors.

   You can:

   • use the color pickers to select your colors,
   • click on a gradient sample to use the sample's colors,
   • use a random gradient sample by clicking on the button,
   • add more colors by clicking the + button.

5. Enter the color stops.

6. Click on "Copy Gradient Code" and the code will be copied to your clipboard.

Running

1. Clone the repository

   git clone https://github.com/victoreronmosele/flutter_gradient_generator.git

2. Cd into the folder

   cd flutter_gradient_generator

3. Run the app

   flutter run 

Roadmap

• [x] Linear gradient
• [x] Radial gradient
• [x] Sweep gradient
• [x] Color picker
• [x] Color stops
• [x] Addition of more colors
• [x] Gradient samples
• [x] Downloading gradient as image
• [ ] Addition of more gradient styles
• [ ] Text gradients
• [ ] CSS to Flutter converter
• [ ] Dark mode

Contact

Project Link: https://github.com/victoreronmosele/flutter_gradient_generator

Acknowledgments

• Gradient samples are from uiGradients.

License

Distributed under the GPL 3.0 License. See LICENSE.txt for more information.