Gradient Box

A package that lets you add a beautiful modifiable Gradient Box to your Flutter app.


  1. Add the latest version of package to your pubspec.yaml (and run dart pub get ):
  gradientbox: ^0.0.1
  1. Import the package and use it in your Flutter App.
import 'package:gradientbox/gradientbox.dart';

Getting Started

There are a number of properties that you can modify:

  • onTap
  • height
  • width
  • padding
  • margin
  • alignment
  • borderRadius
  • showShadow
  • shadowColor
  • gradientColors
  • child

class GradientBoxDemoScreen extends StatelessWidget {
  const GradientBoxDemoScreen({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text(
            "Demo 💯",
            style: TextStyle(color:, fontSize: 14),
          centerTitle: true,
          backgroundColor: Colors.white,
          elevation: 0.5,
        body: Column(
          children: [
              child: Center(
                child: GradientBox(
                    margin: const EdgeInsets.all(20),
                    padding: const EdgeInsets.symmetric(
                        vertical: 25, horizontal: 30),
                    height: MediaQuery.of(context).size.height * 0.25,
                    borderRadius: 15,
                    gradientColors: GradientColors.blueSkies,
                    alignment: Alignment.topLeft,
                    showShadow: true,
                    shadowColor: Colors.grey,
                    onTap: () =>
                        const SnackBar(content: Text("Blue Skies"))),
                    child: content),
            const Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                style: TextStyle(fontSize: 10, color:,


Gradient Box is 100% free and open source. This package accepts contributions from the public – including you. There are a couple of ways in which you can contribute to the growing community of GradientBox.

  • Add gradient colors to the package.
  1. To add your gradient colors, fork this repository, then go to gradient_colors.dart file, and add a GradientColors variable which takes a list of colors (All the gradient colors are loaded from a single gradient_colors.dart file in \lib\utils\).
class GradientColors {


  static GradientColors flare = GradientColors(const [


  1. After that add your GradientColors variable to the _gradientColors list and then submit a pull request.
class GradientColors {


  static final List<GradientColors> _gradientColors = [


  • Fix a bug
  • If you are a developer, feel free to check out the source and submit pull requests.

NOTE - Please keep gradient submissions and bug fixes in separate PRs.

❤️ Found this project useful?

If you found this project useful, then please consider giving it a ⭐ on Github and sharing it with your friends.


A little project by @aquib.hamid