linkedin twitter "Buy Me A Coffee"

About Me

I am shamim hasnain (shadid), a Flutter & React developer with a passion for creating reusable UI components. I have created this package to help you create beautiful and customizable buttons for your Flutter applications.

Hasnain UI Button

A customizable Flutter button package that provides various button styles and variants with extensive customization options.

Features

  • Multiple button variants (Solid, Outline, Destructive)
  • Customizable width and height
  • Custom background colors
  • Border customization for outline variant
  • Border radius customization
  • Text style customization
  • Disabled state support

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  hasnain_ui_button: ^0.0.4

Then run:

flutter pub get

Usage

First, import the package:

import 'package:hasnain_ui_button/hasnain_ui_button.dart';

Example

Example Screen Shot

Basic Usage

Button(
  text: 'Click me',
  onPressed: () {
    print('Button pressed');
  },
)

Button Variants

Outline Button

Button(
  variant: ButtonVariant.outline,
  text: 'Outline Button',
  onPressed: () {},
)

Solid Button

Button(
  variant: ButtonVariant.solid,
  text: 'Solid Button',
  onPressed: () {},
)

Destructive Button

Button(
  variant: ButtonVariant.destructive,
  text: 'Destructive Button',
  onPressed: () {},
)

Customization Examples

Custom Colors and Size

Button(
  text: 'Custom Button',
  backgroundColor: Colors.teal,
  width: 150,
  height: 50,
  onPressed: () {},
)

Custom Border

Button(
  variant: ButtonVariant.outline,
  text: 'Custom Border',
  borderSide: BorderSide(color: Colors.red, width: 2),
  onPressed: () {},
)

Custom Text Style

Button(
  text: 'Styled Text',
  textStyle: TextStyle(
    color: Colors.redAccent,
    fontWeight: FontWeight.bold,
    fontSize: 18,
  ),
  onPressed: () {},
)

Disabled Button

Button(
  text: 'Disabled',
  isDisabled: true,
  onPressed: () {},
)

Primary Color

 Button(
  text: 'primary',
  onPressed: () {},
  backgroundColor: colorScheme.primary,
  height: 40,
  width: 100,
  ),

Secondary Color

 Button(
  text: 'secondary',
  onPressed: () {},
  backgroundColor: colorScheme.secondary,
  height: 40,
  width: 100,
  ),

Properties

Property Type Description
text String The button's label text
onPressed VoidCallback Function called when button is pressed
variant ButtonVariant Button style variant (solid, outline, destructive)
width double? Custom button width
height double? Custom button height
backgroundColor Color? Custom background color
borderSide BorderSide? Custom border properties for outline variant
borderRadius BorderRadius? Custom border radius
isDisabled bool? Whether the button is disabled
textStyle TextStyle? Custom text style

Additional Information

  • Requires Flutter SDK: >=3.0.0
  • Supports both Material 2 and Material 3
  • Platform Support: Android, iOS, Web, Windows, macOS, Linux

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

hasnain_ui_button