custom_btn_plus
A comprehensive Flutter button package with enums, multiple variants, gesture support, and icon buttons.
Getting Started
Add to your pubspec.yaml:
dependencies:
custom_btn_plus: ^1.0.0
Import in your Dart files:
import 'package:custom_btn_plus/custom_btn_plus.dart';
Import in your Dart files:
import 'package:custom_btn/custom_btn.dart';
Usage
Basic Button
AppButton(
type: ButtonType.signIn,
onPressed: () => authController.login(),
)
Outlined Button
AppButton(
type: ButtonType.connect,
variant: ButtonVariant.outlined,
onPressed: () => bleController.scan(),
)
Custom Style
AppButton(
type: ButtonType.connect,
variant: ButtonVariant.outlined,
customColor: Colors.teal,
customBorderRadius: 24,
onPressed: () {},
)
Gesture with Double/Triple Tap
AppButton(
type: ButtonType.syncData,
variant: ButtonVariant.gesture,
gestureConfig: GestureConfig(
onTap: () => print('single tap'),
onDoubleTap: () => print('double tap'),
onLongPress: () => print('long press'),
onTripleTap: () => print('triple tap'),
),
onPressed: () {},
)
Icon Button with Badge
AppIconButton(
type: ButtonType.syncData,
shape: IconButtonShape.rounded,
size: IconButtonSize.lg,
showBadge: true,
badgeLabel: '3',
onPressed: () {},
)
Loading State
AppButton(
type: ButtonType.submit,
isLoading: true,
onPressed: null,
)
Button Types
| Category | Types |
|---|---|
| Auth | signIn, signUp, signOut, forgotPassword, verifyOtp, biometric |
| Navigation | back, next, skip, close, cancel, goHome |
| Connectivity | connect, disconnect, reconnect, scanDevices, pairDevice |
| Actions | save, submit, confirm, delete, edit, refresh, retry, share, download, upload, copy, clear |
| IoT/Solar | startMonitor, stopMonitor, syncData, exportData, viewChart, sendCommand |
| UI State | loading, disabled |
Button Variants
ButtonVariant.elevated- Default filled button with shadowButtonVariant.outlined- Bordered buttonButtonVariant.text- Text-only buttonButtonVariant.gesture- Full gesture detection areaButtonVariant.inkWell- Material ripple effectButtonVariant.iconBtn- Icon-only buttonButtonVariant.floatingAction- Floating action buttonButtonVariant.tonal- Material 3 tonal buttonButtonVariant.filled- Material 3 filled button
Custom Style Parameters
| Parameter | Type | Default |
|---|---|---|
customColor |
Color? |
type.color |
customTextColor |
Color? |
Colors.white |
customBorderRadius |
double? |
12 |
customElevation |
double? |
2 |
customPadding |
EdgeInsetsGeometry? |
H:20 V:14 |
customTextStyle |
TextStyle? |
w600, size 14 |
customIconSize |
double? |
18 / 24 |
customBorderSide |
BorderSide? |
1.5px type.color |
customMinSize |
Size? |
64x44 |
customChild |
Widget? |
icon + label row |
License
MIT License - see LICENSE file for details.