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

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

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

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.