How to accept images in TextField Flutter

Question

In android, when we take a screenshot, it gets stored in the clipboard. Now if I open WhatsApp, and tap on the message field. My keyboard gives me a suggestion to paste the image from the clipboard, as shown below.

I am guessing this is because the TextField somehow tells the OS that it can accept images. How can I achieve the same behavior in a TextField of flutter? If not a TextField, is there any way to implement a button that can paste image from clipboard into our app?

I have found a pub package for other platforms - https://pub.dev/packages/pasteboard but it doesn't seem to support android.

check this post it might help you : https://stackoverflow.com/questions/65432586/clipboard-an-image-in-flutter — Abdelaziz HADIAT ALLAH, Mar 20 '23 at 09:04

score 1 · Answer 1 · answered Mar 23 '23 at 18:25

very good question, on the bleeding edge of flutter

to get this functionality switch to the flutter master channel (command flutter channel master), this will now include PR 110052 which adds this functionality.

to use it simply add this to your TextField:

//...
  contentInsertionConfiguration: ContentInsertionConfiguration(
    onContentInserted : (_){/*your cb here*/}
    allowedMimeTypes: ["image/png",/*...*/],
  }),
//...

this will then use the android specific content commit api to (as you guessed) tell the OS that your TextField accepts the given mimetypes; gboard will recognize this and suggest the content with fitting mimetypes in your clipboard

score 0 · Answer 2 · answered Mar 21 '23 at 10:23

0

You can use this package it supports all platforms super_clipboard then customize the process by adding an icon button for example.

follow the installation steps because the plugin uses Rust internally to implement low-level platform-specific functionality

answered Mar 21 '23 at 10:23

Iheb Briki

236
4
6

I followed the installation steps, and tried using it. But `reader.canProvide(Formats.png)` keeps returning `false`, even though I have an image in the clipboard. Have you tried this package on your own? Did it work for android? – letsintegreat Mar 21 '23 at 17:50
tbh i tried it on desktop Linux and windows and it works very well for me didn't try it yet on android – Iheb Briki Mar 22 '23 at 19:31

score 0 · Answer 3 · answered Mar 21 '23 at 17:36

In Flutter, you can use the FlutterClipboard package to interact with the system clipboard.

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_clipboard_manager/flutter_clipboard_manager.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("My Widget"),
      ),
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              hintText: "Paste the screenshot here",
            ),
            keyboardType: TextInputType.multiline,
            maxLines: null,
            onTap: () async {
              var clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
              if (clipboardData != null && clipboardData.text != null) {
                setState(() {
                  _textEditingController.text = clipboardData.text;
                });
              }
            },
          ),
        ],
      ),
    );
  }
}

This would work for text, not images. Could you please make sure that you have understood the question correctly? — letsintegreat, Mar 21 '23 at 17:52
it will paste the path so you can use Image.file(File(path)) — Tamer El Zein, Mar 21 '23 at 18:52

score 0 · Answer 4 · answered Mar 22 '23 at 10:01

Copying files to the clipboard is not widely supported; however, as a general standard, some applications follow the rule of copying the path of the file to the clipboard in order to access it.

you can doing something like this.

Future<String> get _localPath async {
  final directory = await getApplicationDocumentsDirectory();
  return directory.path;
}

Future<void> _copyFile() async {
   final path = await _localPath;
   Clipboard.setData(new ClipboardData(text: "content://${_localPath}/image.png"));
   return;
}

And these are sources I used when I making this answer. It will usefull for you.

Clipboard an image in Flutter

How to copy Images/files to clipboard in android? Any Alternative methods/steps to get this

And If you really intersting solve this problem you can write in native functionally and used in flutter with platform channel

How to accept images in TextField Flutter

4 Answers4