widgets_to_image 2.0.1 copy "widgets_to_image: ^2.0.1" to clipboard
widgets_to_image: ^2.0.1 copied to clipboard

A powerful Flutter package to convert any widget into high-quality images with customizable formats, quality settings, and advanced features.

Widgets To Image #

pub package License: MIT Demo

A powerful Flutter package to convert any widget into high-quality images with customizable formats, quality settings, and advanced features.

๐ŸŒ Live Demo #

Try the interactive demo โ†’

Experience the package capabilities with our modern, professional demo featuring:

  • ๐ŸŽฏ Basic widget capture examples
  • โš™๏ธ Advanced configuration options
  • ๐ŸŽญ Animation capture demonstrations
  • ๐Ÿ“ฑ Responsive design with Material 3

Demo

โœจ Features #

  • ๐ŸŽฏ Simple API - Convert any widget to image with just a few lines of code
  • ๐Ÿ–ผ๏ธ Multiple Formats - Support for PNG, JPEG, Raw RGBA, and Raw Unmodified formats
  • โš™๏ธ Customizable Options - Control pixel ratio, quality, animations, and delays
  • ๐ŸŽจ High Quality - Generate high-resolution images with custom pixel ratios
  • ๐Ÿ”„ Animation Support - Capture animated widgets with proper timing
  • ๐Ÿ“ฑ Cross Platform - Works on iOS, Android, Web, macOS, Windows, and Linux
  • ๐Ÿงช Well Tested - Comprehensive test suite ensuring reliability
  • ๐Ÿ“š Rich Documentation - Detailed examples and API documentation

๐Ÿš€ Getting Started #

Installation #

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

dependencies:
  widgets_to_image: ^2.0.0

Install it using the command line:

flutter pub get

Import the package:

import 'package:widgets_to_image/widgets_to_image.dart';

๐Ÿ“– Usage #

Basic Usage #

// Create a controller
WidgetsToImageController controller = WidgetsToImageController();

// Wrap your widget
WidgetsToImage(
  controller: controller,
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    child: const Center(
      child: Text(
        'Hello World!',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
)

// Capture the widget
Uint8List? bytes = await controller.capture();

Advanced Usage with Options #

// Capture with custom options
Uint8List? bytes = await controller.capture(
  options: const CaptureOptions(
    format: ImageFormat.jpeg,
    pixelRatio: 3.0,
    quality: 95,
    waitForAnimations: true,
    delayMs: 100,
  ),
);

Convenience Methods #

// Capture as PNG with high resolution
Uint8List? pngBytes = await controller.capturePng(
  pixelRatio: 3.0,
  waitForAnimations: true,
);

// Capture as JPEG with custom quality
Uint8List? jpegBytes = await controller.captureJpeg(
  quality: 90,
  pixelRatio: 2.0,
);

Reactive UI with Builder #

WidgetsToImageBuilder(
  controller: controller,
  builder: (context, isCapturing, capture) {
    return Column(
      children: [
        if (isCapturing)
          const CircularProgressIndicator()
        else
          ElevatedButton(
            onPressed: () async {
              final bytes = await capture();
              // Handle the captured bytes
            },
            child: const Text('Capture Widget'),
          ),
      ],
    );
  },
)

Error Handling #

try {
  final bytes = await controller.capture();
  // Success - use the bytes
} on CaptureException catch (e) {
  // Handle specific capture errors
  print('Capture failed: ${e.message}');
  if (e.originalError != null) {
    print('Caused by: ${e.originalError}');
  }
} catch (e) {
  // Handle other errors
  print('Unexpected error: $e');
}

Lifecycle Callbacks #

controller.onCaptureStart = () {
  print('Capture started');
};

controller.onCaptureComplete = (bytes) {
  print('Capture completed with ${bytes.length} bytes');
};

controller.onCaptureError = (error) {
  print('Capture failed: ${error.message}');
};

๐Ÿ”ง API Reference #

CaptureOptions #

Property Type Default Description
pixelRatio double 1.0 The pixel ratio for the captured image
format ImageFormat ImageFormat.png The output image format
quality int 95 Quality for JPEG format (0-100)
waitForAnimations bool false Wait for animations before capturing
delayMs int 0 Additional delay in milliseconds

ImageFormat #

  • ImageFormat.png - PNG format with transparency support
  • ImageFormat.jpeg - JPEG format with quality control
  • ImageFormat.rawRgba - Raw RGBA pixel data
  • ImageFormat.rawUnmodified - Raw unmodified pixel data

WidgetsToImageController Methods #

  • capture({CaptureOptions options}) - Capture with custom options
  • capturePng({...}) - Convenience method for PNG capture
  • captureJpeg({...}) - Convenience method for JPEG capture
  • dispose() - Clean up resources

WidgetsToImage Properties #

  • controller - The capture controller (required)
  • child - The widget to capture
  • clipBehavior - Whether to clip the child widget

๐Ÿ“ฑ Example App #

The package includes a comprehensive example app demonstrating:

  • Basic widget capture
  • Advanced options configuration
  • Animated widget capture
  • Different image formats
  • Error handling
  • Reactive UI updates

Run the example:

cd example
flutter run

๐Ÿ› ๏ธ Platform Support #

Platform Support
Android โœ…
iOS โœ…
Web โœ…
macOS โœ…
Windows โœ…
Linux โœ…

๐Ÿค Contributing #

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

๐Ÿ“„ License #

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

๐Ÿ™ Acknowledgments #

  • Flutter team for the amazing framework
  • Community contributors for feedback and improvements

๐Ÿ“ž Support #


Made with โค๏ธ by Mohamed Abdo phone

MacOS #

phone

190
likes
160
points
16.6k
downloads

Publisher

verified publishermohamed-abdo.com

Weekly Downloads

A powerful Flutter package to convert any widget into high-quality images with customizable formats, quality settings, and advanced features.

Repository (GitHub)
View/report issues
Contributing

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on widgets_to_image