Gradient Box

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

Installation

1. Add the latest version of package to your pubspec.yaml (and run dart pub get ):

dependencies:
  gradientbox: ^0.0.1

2. 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); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: const Text( "Demo 💯", style: TextStyle(color: Colors.black, fontSize: 14), ), centerTitle: true, backgroundColor: Colors.white, elevation: 0.5, ), body: Column( children: [ Expanded( 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: () => ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text("Blue Skies"))), child: content), ), ), const Padding( padding: EdgeInsets.all(15.0), child: Text( "GradientBox", style: TextStyle(fontSize: 10, color: Colors.blue), ), ) ], )); } }

Contributing

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 [
    Color(0xFFf12711),
    Color(0xFFf5af19),
  ]);

}

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

class GradientColors {

  ...

  static final List<GradientColors> _gradientColors = [
    ...

    flare,
   ]
}

• 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}}