custom_button A highly customizable button widget for Flutter applications that offers a rich set of styling options and features. Show Image Show Image Features
Easy-to-use, customizable button component Support for both solid colors and gradients Optional icon integration Customizable text styling Flexible sizing options Shadow effects for depth Customizable border radius Adjustable padding
Installation
Add this to your package's pubspec.yaml file:
yamlCopydependencies:
custom_button: ^1.0.0
Then run:
bashCopyflutter pub get
Usage
Import the package:
dartCopyimport 'package:custom_button/custom_button.dart';
Basic Usage
dartCopyCustomButton(
text: 'Click Me',
onTap: () {
print('Button clicked!');
},
)
Customized Button
dartCopyCustomButton(
text: 'Submit',
onTap: () {
// Your action here
},
color: Colors.purple,
textColor: Colors.white,
borderRadius: 20.0,
padding: EdgeInsets.symmetric(vertical: 18.0, horizontal: 40.0),
fontSize: 18.0,
fontWeight: FontWeight.w600,
height: 60.0,
width: 200.0,
)
Button with Icon
dartCopyCustomButton(
text: 'Send',
onTap: () {
// Your action here
},
icon: Icons.send,
color: Colors.green,
)
Gradient Button
dartCopyCustomButton(
text: 'Gradient Button',
onTap: () {
// Your action here
},
gradient: LinearGradient(
colors: Colors.blue, Colors.purple,
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
)
Parameters
ParameterTypeDefaultDescriptiontextStringrequiredThe text displayed on the buttononTapVoidCallbackrequiredFunction called when button is tappedcolorColorColors.blueBackground color of the buttongradientGradient?nullOptional gradient for backgroundtextColorColorColors.whiteColor of the button textborderRadiusdouble10.0Corner radius of the buttonpaddingEdgeInsetsGeometryEdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0)Internal padding of the buttonfontSizedouble16.0Size of the button textfontWeightFontWeightFontWeight.boldWeight of the button textheightdouble?nullOptional fixed heightwidthdouble?nullOptional fixed widthiconIconData?nullOptional icon to display
Example App
dartCopyimport 'package:flutter/material.dart';
import 'package:custom_button/custom_button.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Button Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Custom Button Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButton(
text: 'Default Button',
onTap: () {},
),
const SizedBox(height: 20),
CustomButton(
text: 'Gradient Button',
onTap: () {},
gradient: const LinearGradient(
colors: Colors.pink, Colors.purple,
),
),
const SizedBox(height: 20),
CustomButton(
text: 'Button with Icon',
onTap: () {},
icon: Icons.favorite,
color: Colors.red,
),
],
),
),
),
);
}
}
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Additional Information
Homepage Issue Tracker Documentation