Gradient Button

A Flutter package that provides customizable buttons with gradient colors. Enhance your Flutter UI by easily creating buttons with smooth gradient backgrounds.

Features

  • Create buttons with gradient backgrounds using the GradientButton widget.
  • Customize button dimensions, border radius, and more.
  • Easy integration and usage within your Flutter projects.

Installation

  • To use this package, add gradient_coloured_buttons as a dependency in your pubspec.yaml file and run dart pub get:
dependencies:
        gradient_coloured_buttons: ^0.1.0
  • Import the package and use it in your Flutter App.
   import 'package:gradient_coloured_buttons/gradient_coloured_buttons.dart';

Properties

These are the properties that you can modify:

  • text

  • onPressed

  • gradientColors

  • width

  • height

  • borderRadius

  • textStyle

Usage

        GradientButton(
              text: "Johnson Redonyx Silva",
              textStyle: TextStyle(fontWeight: FontWeight.bold,fontSize: 15),
              gradientColors: [Colors.red,Colors.black,Colors.brown],
              width: 200,
              height: 50,
              borderRadius: 30.0,
              onPressed: ()
              {
                print("GradientButton is Pressed");
              }
          ),

Complete code for example

//HERE IS THE COMPLETE CODE ...

import 'package:flutter/material.dart';

//Import the package in your Dart file:

import 'package:gradient_coloured_buttons/gradient_coloured_buttons.dart';

void main() {
runApp(GradientButtons());
}

class GradientButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Gradient Coloured button',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: GradientColouredButton(),
  );
}
}
class GradientColouredButton extends StatefulWidget {
const GradientColouredButton({Key? key}) : super(key: key);

@override
State<GradientColouredButton> createState() => _GradientColouredButtonState();
}

class _GradientColouredButtonState extends State<GradientColouredButton> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body:
    //      <---content STARTS here--->
    GradientButton(
            text: "Johnson Redonyx Silva",
            textStyle: TextStyle(fontWeight: FontWeight.bold,fontSize: 15),
            gradientColors: [Colors.red,Colors.black,Colors.brown],
            width: 200,
            height: 50,
            borderRadius: 30.0,
            onPressed: ()
            {
              print("GradientButton is Pressed");
            }
        ),
    //      <---content ENDS here--->
  );
}
}

Example Image

Example Image

Additional information

This package offers a straightforward solution to apply gradient colors to buttons, enabling you to enhance their visual appeal effortlessly and efficiently.