ready_widgets

Pub Version Pub Points Platform

A Flutter package offering a collection of reusable, customizable widgets to streamline UI development with minimal setup and no third-party dependencies. This package includes buttons, inputs, avatars, network images, shimmer effects, and more.


🚀 Installation

Add ready_widgets to your pubspec.yaml dependencies:

dependencies:
  ready_widgets: ^latest_version

Then run:

flutter pub get

Import the package in your Dart file:

import 'package:ready_widgets/ready_widgets.dart';

📚 Widgets and Usage

1. ReadyTextButton

A flexible text button with solid, outlined, or transparent styles, supporting icons and customizable sizes.

Example: Basic Transparent Button

ReadyTextButton(
  text: 'Click Me',
  onPress: () => print('Pressed!'),
),

Example: Solid Button with Icon

ReadyTextButton.solid(
  text: 'Submit',
  icon: Icons.check,
  iconPosition: IconPosition.leading,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  size: ReadyButtonSize.large,
),

Example: Outlined Button

ReadyTextButton.outlined(
  text: 'Cancel',
  borderColor: Colors.red,
  onPress: () => print('Cancelled!'),
),

2. ReadyLikeButton

A toggleable like button with animation, supporting solid, outlined, or transparent styles.

Example: Default Like Button

ReadyLikeButton(
  onPress: (isLiked) async {
    await Future.delayed(Duration(milliseconds: 500));
    return !isLiked;
  },
),

Example: Solid Like Button

ReadyLikeButton.solid(
  color: Colors.red,
  iconColor: Colors.white,
  size: ReadyButtonSize.large,
  isLiked: true,
),

3. ReadyIconButton

An icon-only button with support for badges, tooltips, and rounded or rectangular shapes.

Example: Basic Icon Button

ReadyIconButton(
  iconData: Icons.favorite_border,
  onPress: () => print('Icon pressed!'),
  tooltip: 'Favorite',
),

Example: Solid Icon Button with Badge

ReadyIconButton.solid(
  iconData: Icons.notifications,
  backgroundColor: Colors.blue,
  badge: 5,
  size: ReadyButtonSize.large,
),

4. ReadyElevatedButton

A customizable elevated button with optional icons and predefined size variants.

Example: Default Elevated Button

ReadyElevatedButton(
  text: 'Submit',
  onPress: () => print('Submitted!'),
),

Example: Small Button with Icon

ReadyElevatedButton.small(
  text: 'Save',
  icon: Icons.save,
  backgroundColor: Colors.green,
  textColor: Colors.white,
),
Ready Buttons

5. ReadyEmptyWidget

A widget for empty states with an animated icon, title, subtitle, and optional additional widget.

Example: Basic Empty State

ReadyEmptyWidget(
  title: 'No Data Found',
  subtitle: 'Try adding some items.',
  icon: Icons.info_outline,
),

Example: Custom Empty State with Button

ReadyEmptyWidget(
  title: 'Empty List',
  subtitle: 'Start by adding a new item.',
  customIcon: Icon(Icons.error, size: 40, color: Colors.red),
  additionalWidget: ReadyElevatedButton(
    text: 'Add Item',
    onPress: () => print('Add item pressed!'),
  ),
),
Ready Empty Widget

6. ReadyAvatar

An avatar widget displaying a network image or initials, with an optional online status indicator.

Example: Basic Avatar

ReadyAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  size: 60,
),

Example: Initials Avatar with Online Indicator

ReadyAvatar(
  name: 'John Doe',
  isOnline: true,
  size: 80,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
),

7. ReadyNetworkImage

A network image widget with shimmer loading and error handling.

Example: Basic Network Image

ReadyNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  width: 100,
  height: 100,
),

Example: Rounded Image with Custom Error

ReadyNetworkImage(
  imageUrl: 'https://example.com/invalid.jpg',
  width: 120,
  height: 120,
  isRounded: true,
  borderColor: Colors.blue,
  borderWidth: 2,
  errorWidget: Icon(Icons.error, size: 40),
),
Ready Images

8. ReadyInput

A customizable text input field with support for prefix/suffix icons, validation, and decoration styles.

Example: Basic Input

ReadyInput(
  label: 'Name',
  hint: 'Enter your name',
  controller: TextEditingController(),
),

Example: Password Input

ReadyInput(
  label: 'Password',
  hint: 'Enter your password',
  isObscure: true,
  prefixIcon: Icon(Icons.lock),
),

9. ReadyPhoneInput

A phone number input with a country code picker and localized country names.

Example: Basic Phone Input

ReadyPhoneInput(
  controller: TextEditingController(),
  onCountryChange: (country) => print('Selected: ${country.name}'),
  initialDialCode: '+1',
),

Example: Phone Input with Validation

ReadyPhoneInput(
  controller: TextEditingController(),
  onCountryChange: (country) => print('Country: ${country.dialCode}'),
  validator: (value) =>
      value!.length < 10 ? 'Phone number too short' : null,
),
Ready Inputs Ready Inputs 1

10. ReadyShimmer

A dependency-free shimmer effect for loading placeholders.

Example: Basic Shimmer

ReadyShimmer(
  width: 200,
  height: 100,
),

Example: Custom Shimmer Colors

ReadyShimmer(
  width: 150,
  height: 150,
  borderRadius: BorderRadius.circular(16),
  shimmerColors: [Colors.blue.shade200, Colors.blue.shade50, Colors.blue.shade200],
),
Ready Shimmer

11. ReadyReadMoreText

A widget for trimming long text with "Read more" and "Read less" toggle links.

Example: Basic Read More

ReadyReadMoreText(
  text: 'This is a very long text that needs to be truncated because it exceeds the maximum number of lines allowed.',
  maxLines: 2,
),

Example: Length-Based Trimming

ReadyReadMoreText(
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  trimMode: TrimMode.length,
  trimLength: 50,
  moreLessStyle: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
),
Ready Text

🛠️ Features

  • No Third-Party Dependencies: Lightweight and built with Flutter's core libraries.
  • Customizable: Extensive styling options for colors, sizes, icons, and more.
  • Responsive: Adapts to different screen sizes and orientations.
  • Platform Support: Works on all Flutter-supported platforms (iOS, Android, web, etc.).
  • Interactive: Includes animations (e.g., shimmer, like button scale) and interactive elements (e.g., country picker, read more links).

☕ Support the Developer

If you find ready_widgets helpful, consider supporting the developer:

Buy Me A Coffee


📝 Notes

  • Documentation: Check the ready_widgets page on pub.dev for the latest version and additional details.
  • Versioning: Always use the latest version in pubspec.yaml to access new features and fixes.
  • Contributions: Contributions, issues, and feature requests are welcome on the package's GitHub repository.

If you have specific use cases or need further assistance, refer to the individual widget documentation or reach out to the developer community.