A flutter package to convert any widget to an Image.

Overview

Davinci Supported Platforms Pub version MIT Lisence linter Codacy Badge PR's welcome


A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats.

📹 Preview

ℹ️ Usage

Prerequisites

on iOS

Add the following keys to your Info.plist file, located in /ios/Runner/Info.plist :

  • NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.

on Android

  • android.permission.WRITE_EXTERNAL_STORAGE - Permission for usage of external storage

Imports

import 'package:davinci/core/davinci_capture.dart';
import 'package:davinci/davinci.dart';

Pseudo code

If the widget is in the widget tree
Use click method
If the widget is not in the widget tree
Use offStage method

By default the generated image name will be "davinci". But if you wish to change it, you can pass the image name in DavinciCapture.click method.
await DavinciCapture.click(imageKey, fileName: "Hello");

When the image is captured, you can either open the image preview or get the image in Uint8List.
await DavinciCapture.click(imageKey, fileName: "Hello", openFilePreview = false, returnImageUint8List = true);

If the captured image is pixelated, calculate the pixel ratio dynamically based on the device and pass it to the DavinciCapture.click method.
double pixelRatio = MediaQuery.of(context).devicePixelRatio;

await DavinciCapture.click(imageKey, fileName: "Hello", pixelRatio: pixelRatio);

To save the image directly to the device, set saveToDevice flag to true. You can also specify the album name or you can leave it undefined.

await DavinciCapture.click(imageKey, fileName: "Hello", saveToDevice = true, album: "Davinci", openFilePreview = false);

ℹ️ All the parameters in the click method is present in offStage method too.

🛎️ Note :

Comments
  • Black Border with the Image?

    Black Border with the Image?

    The Plugin is very beautiful it removed my major issues and there is always big praise to its creators, I always Believe in this kind of Humanful - Opensource. My Experience with this Opensource is very beautiful. And I am also dedicated to helping grow this Plugin, Amen.

    My Issue When I am Capturing Something, it is giving a black border as outputs, How can I fix these?

    i love opensource

    testing needed possible bug 
    opened by madd-project 9
  • Ability to capture the widget which is outside the viewport.

    Ability to capture the widget which is outside the viewport.

    If the widget is outside the viewport, meaning the entire widget comes into view only if we have to scroll, Then this package fails.

    This can be achieved by converting the entire widget into a canvas and then export it as image.

    Check if the widget is in viewport, i.e key.currentContext.findRenderObject is not null or doesn't throw any exception

    • If yes, use the existing method to export the widget into a image.
    • If not, convert the widget to canvas then export it as image.
    enhancement P1 
    opened by Imgkl 5
  • `DavinciCapture.click` returning `null`

    `DavinciCapture.click` returning `null`

    Hi! Firstly, thank you for your awesome package :bowtie:

    Problem

    I am trying to get the Uint8List data from the DavinciCapture.click on the initState of an StatefulWidget like this:

    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) async {
          if (mounted && pictureKey.isNotNull) {
            
            pictureBytes = await DavinciCapture.click(
              pictureKey!,
              fileName: 'diven',
              returnImageUint8List: true,
              openFilePreview: false,
              saveToDevice: false,
            );
    
          }
        });
    

    but pictureBytes is always null. Am I doing something wrong? Is it a bug?

    Full Widget code
    class ShareModal extends StatefulWidget {
      const ShareModal({Key? key, required this.plan}) : super(key: key);
    
      final PlanDTO plan;
    
      @override
      _ShareModalState createState() => _ShareModalState();
    }
    
    class _ShareModalState extends State<ShareModal> with Utils, ShareableMixin {
      late final Future<Uri> uri;
      bool isLinkLoading = true;
      Uri? url;
    
      bool isScreenshotLoading = true;
      late Widget widgetPreview;
      // late final Future<dynamic> picture;
      Uint8List? pictureBytes;
      GlobalKey? pictureKey;
    
      @override
      void initState() {
        super.initState();
    
        uri = generatePlanLink(plan: widget.plan);
        uri.whenComplete(
          () async {
            if (mounted) {
              url = (await uri);
              setState(() {
                isLinkLoading = false;
              });
            }
          },
        );
    
        WidgetsBinding.instance!.addPostFrameCallback((_) async {
          if (mounted && pictureKey.isNotNull) {
            pictureBytes = await DavinciCapture.click(
              pictureKey!,
              fileName: 'diven',
              returnImageUint8List: true,
              openFilePreview: false,
              saveToDevice: false,
            );
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
        final imageHeight = context.screen.height * .7;
        return ListView(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          children: [
            if (isScreenshotLoading)
              Davinci(
                builder: (key) {
                  pictureKey = key;
    
                  return _PlanSharePreview(
                    plan: widget.plan,
                  );
                },
              )
            else
              Center(
                child: ScaleOnTap(
                  onTap: () => context.navigator.push(
                    HeroDialogRoute(
                      builder: (_) => HeroInteractiveViewerDialog(
                          tag: 'planPreview', child: Image.memory(pictureBytes!)),
                    ),
                  ),
                  child: Hero(
                    tag: 'planPreview',
                    child: Image.memory(
                      pictureBytes!,
                      height: imageHeight,
                    ),
                  ),
                ),
              ),
            const SizedBox(
              height: 10,
            ),
            ...
          ],
        );
      }
    }
    

    Environment

    Flutter Doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, 2.0.4, on macOS 11.1 20C69 darwin-x64, locale es-ES)
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    [✓] Xcode - develop for iOS and macOS
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 4.1)
    [✓] VS Code (version 1.58.2)
    [✓] Connected device (2 available)
    
    • No issues found!
    

    Version

    davinci: ^2.0.5

    opened by raulmabe 3
  • Unable to save offstage images without openFilePreview

    Unable to save offstage images without openFilePreview

    When offstage is used with these options. it works as expected, previews the image and saves a new file.

            openFilePreview: true,
            returnImageUint8List: false,
            saveToDevice: true
    

    But I just want to save the file and not preview it. So when I turn openFilePreview=false. Not only is the preview gone. But the file isn't being saved. Expected behavior: No Preview and local saved file.

            openFilePreview: false,
            returnImageUint8List: true,
            saveToDevice: true
    

    I even tired to get the Uint8List in return to manually save. But the object returned null.

            openFilePreview: false,
            returnImageUint8List: true,
            saveToDevice: false
    
    bug P1 
    opened by bharadwajpalakurthy 3
  • How to use this Plugin in ListView Builder

    How to use this Plugin in ListView Builder

    This is My HomeScreen,

    homepage

    There is the More Button, Which Captures the ScreenShot. code

    I can Easily with the Plugin Capture ScreenShot, But the Issue Coming is when I added the New Element the Plugin Captures the Screenshot of new element and when I add again a new element the plugin captures the screenshot the new one and forgets about the old. like this,

    last photo

    opened by madd-project 3
  • type 'RenderConstrainedBox' is not a subtype of type 'RenderRepaintBoundary' in type cast

    type 'RenderConstrainedBox' is not a subtype of type 'RenderRepaintBoundary' in type cast

    Uint8List? thumbData = await DavinciCapture.click(globalKey, fileName: "Hello", openFilePreview: false, returnImageUint8List: true);
    

    result: I/flutter (27697): type 'RenderConstrainedBox' is not a subtype of type 'RenderRepaintBoundary' in type cast

    bug 
    opened by mingV2019 2
  • Just save generated images

    Just save generated images

    It is only possible to choose between return uint8 list and open preview. There is no way to just save the file.

    I know that having the uint8list i can save the file. But i think it would be nice if the package did it. The share package accepts a path for sharing files. I want to just share the image without previewing it.

    enhancement P2 
    opened by lucas-gauer 2
  • Fix RawKeyboard exception

    Fix RawKeyboard exception

    This pull request fixes #10. If we manually supply a FocusManager instance to BuildOwner, the system will not call registerGlobalHandlers() on it and therefore not try to override the global input event handler. This is explicitly stated in the documentation of BuildOwner: "If the focusManager argument is not specified or is null, this will construct a new [FocusManager] and register its global input handlers via [FocusManager.registerGlobalHandlers], which will modify static state. Callers wishing to avoid altering this state can explicitly pass a focus manager here."

    opened by Coronon 1
  • OffStage not working: RawKeyboard.instance.keyEventHandler == null

    OffStage not working: RawKeyboard.instance.keyEventHandler == null

    After my own implementation had the exact same problem I decided to switch to this package. Sadly, it has the exact same problem.

    This happens whenn calling as follows:

    Future<dynamic> image = DavinciCapture.offStage(
        widget,
        logicalSize: logicalSize,
        imageSize: imageSize,
        openFilePreview: false,
        fileName: fileName,
        returnImageUint8List: true,
      );
    
    (await image) // <- Error
    
    E/flutter ( 7481): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/widgets/focus_manager.dart': Failed assertion: line 1463 pos 12: 'RawKeyboard.instance.keyEventHandler == null': is not true.
    E/flutter ( 7481): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
    E/flutter ( 7481): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
    E/flutter ( 7481): #2      FocusManager.registerGlobalHandlers
    package:flutter/…/widgets/focus_manager.dart:1463
    E/flutter ( 7481): #3      new BuildOwner
    package:flutter/…/widgets/framework.dart:2355
    E/flutter ( 7481): #4      DavinciCapture.offStage
    package:davinci/core/davinci_capture.dart:76
    
    opened by Coronon 0
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Mahdi 225 Jan 6, 2023
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.

extended_image Language: English| 中文简体 A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network

FlutterCandies 1.6k Dec 31, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Flutter Photo View A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user gestures such

Fire Slime Games 1.7k Jan 3, 2023
A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content. Installation Add dependency to your pubspec.yaml

Anatoly Pulyaevskiy 272 Dec 23, 2022
Build a fancy looking avatar widget with a colorfull ring around the image

Build a fancy looking avatar widget with a colorfull ring around the image

Paweł Wacławiak 0 Feb 19, 2022
A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Paras Jain 64 Dec 26, 2022
Multi image pixker using the image_picker package in flutter

multi_image_selection A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Ambaliya Avnit Karshanbhai 1 Oct 13, 2021
Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Sayandh KP 8 Oct 5, 2022
A flutter package for image carousels.

flutter_image_carousel A flutter package for image carousels. Supports both Asset and Network images. Example new ImageCarousel( <ImageProvider>[

Theo Bouwman 53 Aug 9, 2021
Flutter package for image editing

You can edit image using this package and also you can create flex preview image by setting foreground to null. For now, you can use only asset files.

Berkay CEYLAN 9 Nov 21, 2022
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

evolving_kid 3 May 31, 2021
A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

路小飞 3 Jul 8, 2021
A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Mahesh Jamdade 4 Jan 18, 2022
Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

7c00 3 Oct 5, 2022
Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Fatih Baycu 2 Oct 6, 2021
flutter image demo 主要展示图片与动画处理的案例。比如:网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter_image_demo flutter image demo 主要展示图片与动画处理的案例。 比如:网络图片加载、图片预览、图片缩放、json动画处理等等。 本项目使用到以下插件: cached_network_image、 photo_view 、 lottie 、 flutter_

null 2 Feb 27, 2022
Flutter gallery - Image, Audio, Video & File.

Flutter Gallery Getting Started For help getting started with Flutter, view our online documentation.

Vivek Sharma 55 Sep 26, 2022
A Flutter image editor with support for paint, text, filters, emojis, stickers and more

Flutter Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

null 44 Dec 22, 2022