widgets_helper 1.0.0

A comprehensive Flutter plugin providing useful widgets and tools including SimpleButton, SimpleContainer, and SimpleTextInputField with extensive customization options, padding controls for icons, an [...]

widgets_helper

A Flutter plugin that provides useful widgets and tools for Flutter applications.

Getting Started

1. Add the dependency to your pubspec.yaml:

dependencies:
  widgets_helper: ^1.0.0

2. Import the package:

import 'package:widgets_helper/widgets_helper.dart';

Features

• SimpleButton: A flexible and customizable button widget with support for icons, text, and various styling options
• SimpleContainer: A versatile container widget with support for gradients, borders, and various styling options
• SimpleTextInputField: A comprehensive text input field with support for validation, icons, and extensive customization

SimpleButton Widget

A versatile button widget that supports text, icons, leading/trailing widgets, and extensive customization options.

Basic Usage

import 'package:widgets_helper/widgets_helper.dart';

// Text only button
SimpleButton(
text: "Custom Button",
backgroundColor: Colors.blue,
textColor: Colors.white,
borderRadius: 20,
height: 40,
onPressed: () {},
)

Advanced Usage

// Gradient background
SimpleButton(
  text: "Gradient Button",
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  textColor: Colors.white,
  onPressed: () {},
)

// Outlined button
SimpleButton(
  text: "Outlined Button",
  isOutlined: true,
  borderColor: Colors.blue,
  textColor: Colors.blue,
  onPressed: () {},
)

Properties

Property	Type	Default	Description
text	String?	null	The text to display on the button. Can be null for icon-only buttons.
icon	IconData?	null	The icon to display. Can be used alone or with text.
leadingWidget	Widget?	null	Custom widget to display before the text/icon.
trailingWidget	Widget?	null	Custom widget to display after the text/icon.
isOutlined	bool	false	Whether the button should have an outlined style.
borderRadius	double	16	The border radius of the button.
borderColor	Color?	Colors.black	The color of the border (for outlined buttons).
buttonColor	Color?	Colors.black	The background color when not outlined (deprecated, use backgroundColor).
backgroundColor	Color?	null	The background color of the button. Takes priority over buttonColor.
gradient	Gradient?	null	The gradient background of the button. Takes priority over backgroundColor.
disabledBackgroundColor	Color?	Colors.grey[100]	The background color when the button is disabled.
showLoading	bool	false	Whether to show a loading indicator instead of content.
width	double?	double.infinity	The width of the button.
textColor	Color?	null	The color of the text. Defaults to white for filled buttons, border color for outlined buttons.
onPressed	void Function()?	null	The callback function when the button is pressed.
height	double	54	The height of the button.
loadingColor	Color?	null	The color of the loading indicator.
isEnabled	bool	true	Whether the button is enabled.
iconSize	double	24	The size of the icon.

Button Types

The SimpleButton supports various configurations:

1. Text Only: Just provide the text parameter
2. Icon Only: Just provide the icon parameter
3. Leading Icon + Text: Provide both icon and text
4. Text + Trailing Icon: Provide both text and icon (icon appears after text)
5. Leading Widget + Text: Provide leadingWidget and text
6. Text + Trailing Widget: Provide text and trailingWidget
7. Custom Layout: Mix and match any combination of text, icons, and custom widgets

Styling Options

• Filled Button: Default style with solid background
• Outlined Button: Set isOutlined: true for border-only style
• Custom Colors: Use backgroundColor, textColor, borderColor for custom styling
• Gradient Background: Use gradient for gradient backgrounds (takes priority over backgroundColor)
• Custom Size: Use width and height for custom dimensions
• Custom Border Radius: Use borderRadius for rounded corners
• Loading State: Use showLoading: true to show a loading indicator
• Disabled State: Use isEnabled: false to disable the button

SimpleContainer Widget

A versatile container widget that supports gradients, borders, and extensive customization options.

Basic Usage

import 'package:widgets_helper/widgets_helper.dart';

// Basic container
SimpleContainer(
  width: 200,
  height: 100,
  backgroundColor: Colors.blue,
  child: Text('Hello World'),
)

// Container with border
SimpleContainer(
  backgroundColor: Colors.white,
  borderColor: Colors.grey,
  borderWidth: 2,
  padding: EdgeInsets.all(16),
  child: Text('Bordered Container'),
)

// Container with gradient
SimpleContainer(
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  child: Text('Gradient Container'),
)

Advanced Usage

// Custom styling
SimpleContainer(
  width: double.infinity,
  height: 150,
  backgroundColor: Colors.green,
  borderRadius: 20,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(10),
  child: Column(
    children: [
      Text('Custom Container'),
      SizedBox(height: 10),
      Text('With multiple children'),
    ],
  ),
)

// Radial gradient container
SimpleContainer(
  gradient: RadialGradient(
    colors: [Colors.red, Colors.orange, Colors.yellow],
  ),
  borderRadius: 25,
  child: Text('Radial Gradient'),
)

// Circular container
SimpleContainer(
  width: 100,
  height: 100,
  shape: BoxShape.circle,
  backgroundColor: Colors.purple,
  child: Icon(Icons.star, color: Colors.white),
)

// Container with custom alignment
SimpleContainer(
  width: 200,
  height: 100,
  backgroundColor: Colors.blue,
  alignment: Alignment.centerRight,
  child: Text('Right Aligned'),
)

Properties

Property	Type	Default	Description
width	double?	null	The width of the container.
height	double?	null	The height of the container.
backgroundColor	Color?	Colors.white	The background color of the container.
gradient	Gradient?	null	The gradient background of the container. Takes priority over backgroundColor.
borderColor	Color?	null	The color of the border.
borderRadius	double	12.0	The border radius of the container.
borderWidth	double	1.0	The width of the border.
child	Widget?	null	The child widget to display inside the container.
padding	EdgeInsetsGeometry?	null	The padding inside the container.
margin	EdgeInsetsGeometry?	null	The margin around the container.
shape	BoxShape?	null	The shape of the container (rectangle or circle).
clipBehavior	Clip?	Clip.none	How to clip the container content.
alignment	Alignment?	null	How to align the child within the container.

Container Types

The SimpleContainer supports various configurations:

1. Basic Container: Just provide backgroundColor and child
2. Gradient Container: Use gradient for gradient backgrounds
3. Bordered Container: Use borderColor and borderWidth
4. Rounded Container: Use borderRadius for rounded corners
5. Circular Container: Use shape: BoxShape.circle
6. Custom Styled: Mix and match all properties for custom designs

Styling Options

• Solid Background: Use backgroundColor for solid colors
• Gradient Background: Use gradient for gradient backgrounds
• Borders: Use borderColor and borderWidth for borders
• Custom Size: Use width and height for custom dimensions
• Custom Border Radius: Use borderRadius for rounded corners
• Shapes: Use shape for circular or rectangular containers
• Spacing: Use padding and margin for spacing control
• Alignment: Use alignment to position child content

SimpleTextInputField Widget

A comprehensive text input field with support for validation, icons, and extensive customization options.

Basic Usage

import 'package:widgets_helper/widgets_helper.dart';

// Basic text input
SimpleTextInputField(
  hintText: "Enter your name",
  onChanged: (value) => print(value),
)

// With controller
SimpleTextInputField(
  controller: myController,
  hintText: "Enter email",
  keyboardType: TextInputType.emailAddress,
)

// Password field (auto-toggle)
SimpleTextInputField(
  hintText: "Enter password",
  isObscure: true,
  onChanged: (value) => print(value),
)

Advanced Usage

// With prefix icon
SimpleTextInputField(
  hintText: "Search...",
  prefixIcon: Icon(Icons.search),
  onChanged: (value) => print(value),
)

// With icon padding
SimpleTextInputField(
  hintText: "Search with padding...",
  prefixIcon: Icon(Icons.search),
  prefixIconPadding: EdgeInsets.all(8),
  suffixIcon: Icon(Icons.clear),
  suffixIconPadding: EdgeInsets.only(right: 8),
  onChanged: (value) => print(value),
)

// Custom styling
SimpleTextInputField(
  hintText: "Custom styled",
  fillColor: Colors.grey[100],
  borderColor: Colors.blue,
  focusedBorderColor: Colors.green,
  borderRadius: 20,
  onChanged: (value) => print(value),
)

// With validation
SimpleTextInputField(
  hintText: "Enter email",
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter an email';
    }
    if (!value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
  onChanged: (value) => print(value),
)

// Multi-line input
SimpleTextInputField(
  hintText: "Enter description",
  minLines: 3,
  maxLines: 5,
  onChanged: (value) => print(value),
)

Properties

Property	Type	Default	Description
controller	TextEditingController?	null	The text controller. If null, creates internal controller.
hintText	String?	null	The hint text to display.
keyboardType	TextInputType?	null	The keyboard type for the input.
validator	String? Function(String?)?	null	The validation function.
isObscure	bool	false	Whether the text should be obscured (password).
errorText	String?	null	Custom error text to display.
onChanged	void Function(String)?	null	Callback when text changes.
suffixIcon	Widget?	null	Icon to display after the text.
prefixIcon	Widget?	null	Icon to display before the text.
fillColor	Color?	Colors.white	The background color of the input field.
inputTextColor	Color?	Colors.black	The color of the input text.
showBorder	bool	true	Whether to show the border.
borderColor	Color?	Colors.grey[300]	The color of the border.
focusedBorderColor	Color?	Colors.blue	The color of the border when focused.
errorBorderColor	Color?	Colors.red	The color of the border when there's an error.
hintTextColor	Color?	Colors.grey[500]	The color of the hint text.
fontSize	double	14	The font size of the text.
focusNode	FocusNode?	null	The focus node for the input.
borderRadius	double	16	The border radius of the input field.
contentPadding	EdgeInsetsGeometry?	null	The padding inside the input field.
textStyle	TextStyle?	null	Custom text style.
enabled	bool	true	Whether the input field is enabled.
fontWeight	FontWeight	FontWeight.w600	The font weight of the text.
textAlign	TextAlign	TextAlign.start	The text alignment.
prefixIconMinWidth	double?	24	Minimum width for prefix icon.
prefixIconMaxWidth	double?	48	Maximum width for prefix icon.
prefixIconPadding	EdgeInsetsGeometry?	EdgeInsets.symmetric(horizontal: 8)	Padding around the prefix icon.
suffixIconMinWidth	double?	32	Minimum width for suffix icon.
suffixIconMaxWidth	double?	32	Maximum width for suffix icon.
suffixIconPadding	EdgeInsetsGeometry?	EdgeInsets.symmetric(horizontal: 8)	Padding around the suffix icon.
minLines	int?	1	Minimum number of lines.
maxLines	int?	1	Maximum number of lines.
readOnly	bool	false	Whether the input is read-only.
obscuringCharacter	String	'*'	Character to use for obscuring text.
cursorColor	Color?	Colors.blue	The color of the cursor.
autovalidateMode	AutovalidateMode	AutovalidateMode.onUserInteraction	When to auto-validate.

Input Field Types

The SimpleTextInputField supports various configurations:

1. Basic Input: Just provide hintText and onChanged
2. Password Input: Set isObscure: true for password with auto-toggle
3. With Icons: Use prefixIcon and suffixIcon for custom icons
4. With Validation: Use validator for form validation
5. Multi-line: Use minLines and maxLines for multi-line input
6. Custom Styled: Use all styling properties for custom appearance

Styling Options

• Background Color: Use fillColor for custom background
• Border Colors: Use borderColor, focusedBorderColor, errorBorderColor
• Text Colors: Use inputTextColor and hintTextColor
• Border Radius: Use borderRadius for rounded corners
• Icon Constraints: Use prefix/suffix icon width controls
• Padding: Use contentPadding for internal spacing
• Multi-line: Use minLines and maxLines for text areas

Example App

The plugin includes a comprehensive example app that showcases all three widgets with various configurations. To run the example:

1. Clone the repository
2. Navigate to the example directory
3. Run flutter run

The example app demonstrates:

• Different button styles and states
• Various container configurations
• Text input field customization options
• Real-world usage scenarios

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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