gradient_coloured_buttons 0.1.0 copy "gradient_coloured_buttons: ^0.1.0" to clipboard
gradient_coloured_buttons: ^0.1.0 copied to clipboard

Create visually appealing buttons with customizable gradient colors, dimensions, and border radius to enhance your Flutter UI.

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.

87
likes
120
points
57
downloads

Publisher

unverified uploader

Weekly Downloads

Create visually appealing buttons with customizable gradient colors, dimensions, and border radius to enhance your Flutter UI.

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on gradient_coloured_buttons