ui_to_image

Description:

ui to image

UiToImage #



بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ #
A Flutter package that enables easy generation and sharing of images from custom UI designs.
Features #

Generate captivating images from custom UI designs.
Highlight app features with custom text.
Share generated images seamlessly.
Load previously generated images.
Error handling with customizable toasts or debug prints.


Table of Contents #

Installation
Usage

Import
Create Instance
Generate and Share Images
Load a Previously Generated Image


Example
Contributing
License


Installation #
Add the following line to your pubspec.yaml file:
dependencies:
ui_to_image: <latest_version>
copied to clipboard
IMPORTANT Note for iOS #
If you are starting a new fresh app, you need to create the Flutter App with flutter create -i swift (see flutter/flutter#13422 (comment)), otherwise, you will get this message:
=== BUILD TARGET flutter_inappbrowser OF PROJECT Pods WITH CONFIGURATION Debug ===
The "Swift Language Version" (SWIFT_VERSION) build setting must be set to a supported value for targets which use Swift. Supported values are: 3.0, 4.0, 4.2. This setting can be set in the build settings editor.
copied to clipboard
If you still have this problem, try to edit iOS Podfile like this (see #15):
target 'Runner' do
use_frameworks! # required by simple_permission
...
end

post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.0' # required by simple_permission
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
copied to clipboard
Instead, if you have already a non-swift project, you can check this issue to solve the problem: Friction adding swift plugin to objective-c project.
Usage #
Import the package #
First, import the ui_to_image package in your Dart file:
import 'package:ui_to_image/ui_to_image.dart';
copied to clipboard
Create a UiToImage instance #
Create an instance of UiToImage by providing your custom UI design widget, along with other optional parameters:
final UiToImage imageGenerator = UiToImage(
customDesign: YourCustomWidget(), // Your custom UI design widget
customText: "Custom text to highlight features",
generatedImageName: 'custom_image.png',
mimeType: 'image/png',
shareTitle: 'Share via',
);
copied to clipboard
Replace YourCustomWidget() with the actual widget that represents your custom UI design.
Generate and share images #
To generate an image from your custom UI design and share it, use the generateImage() method. If the image is generated successfully, you can then call the shareImage() method to share it:
// Generate and display the image
await imageGenerator.generateImage().then((success) {
if (success) {
// Image generated successfully
imageGenerator.shareImage(); // Share the generated image
} else {
// Error generating image
}
});
copied to clipboard
Load a previously generated image #
You can use the loadLastImage() method to load a previously generated image:
File? imageFile = await imageGenerator.loadLastImage();
if (imageFile != null) {
// Display the loaded image
}
copied to clipboard
This can be useful for scenarios where you want to display or process a previously generated image.

Note: Limitations on Widget Support #
Please note that as of the current version, the package does not fully support ListView, GridView, or CustomScrollView widgets. It's recommended to avoid using these widgets directly within your custom design, as they may not be captured accurately in the generated image. However, we're actively working to improve widget support in upcoming versions.

Example #
Check out the example directory for a full working example.

Contributing #
Contributions are welcome! If you find a bug or want to add a new feature, feel free to open an issue or submit a pull request.

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

Get in touch #
If you have any questions, feel free to reach out:

Email: [email protected]
GitHub: @Arfaz123
LinkedIn: @Arfaz Chhapawala
YouTube: @devfaaz


Contributing #
Contributions to the ui_to_image package are welcome! Please read the contribution guidelines before submitting a pull request.
Contributors #




Feel free to explore the features of the ui_to_image package and customize it to suit your needs. If you have any questions or feedback, don't hesitate to reach out. Happy coding!

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter