Question 75836 in Flutter Question posted in
The official Flutter documentation can be found here.

How to accept images in TextField Flutter

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.

enter image description here

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.

Tags:

4

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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;
                });
              }
            },
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search