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 yourpubspec.yaml
file and rundart 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
Additional information
This package offers a straightforward solution to apply gradient colors to buttons, enabling you to enhance their visual appeal effortlessly and efficiently.