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

Libraries

widgets_to_image
A powerful Flutter package to convert widgets into high-quality images.