Flutter — добавить копию в буфер обмена без пакета

Опубликовано: 22 Февраля, 2023

В этой статье мы увидим, как реализовать копирование в буфер обмена во Flutter. Мы можем сделать это, используя также package. Но в этой статье мы сделаем это без какого-либо пакета.

Как использовать:

Clipboard.setData(new ClipboardData(text: "Copied text here"));

У буфера обмена есть метод setData , который принимает параметр ClipboardData , который затем принимает текст для копирования .

Подход:

Интуиция — это просто создание текстового поля и кнопки для извлечения текста из текстового поля. а затем позвольте установить данные или текст в буфер обмена. Также мы можем показывать Snackbar при нажатии на кнопку копирования, которая уведомляет пользователя о событии. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2: Импорт пакета материалов

Добавление пакета материалов, который дает нам важные функции и вызывает метод runApp в основной функции, которая будет вызывать наше приложение.

import "package:flutter/material.dart";
void main() {
   runApp(RunMyApp());
}

Шаг 3: Создание виджета без сохранения состояния

Теперь нам нужно сделать виджет без состояния, потому что наше приложение не изменяет свое состояние, а затем возвращает виджет materialApp, который позволяет нам установить заголовок, тему и многое другое.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   
   @override
   Widget build(BuildContext context) {
       return MaterialApp();
   }
}

Шаг 4: Создание виджета Scaffold

Дайте свойство home, и может быть виджет эшафота, который имеет свойство AppBar и body. AppBar позволяет нам указать заголовок AppBar, цвет, начальный и конечный значок. тело принимает класс HomePage.

home: Scaffold(
   appBar: AppBar(
       title: Text("Copy to clipboard"),
   ),
   body: HomePage( );
),

Шаг 5: Создайте класс HomePage и создайте текстовое поле и кнопку для извлечения текста. И в свойстве onpressed установить текст в буфер обмена.

Окончательный код

Dart

import "package:flutter/material.dart";
import "package:flutter/services.dart";
 
void main() => runApp(RunMyApp());
 
class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Copy to Clipboard"),
        ),
        body: HomePage(),
      ),
    );
  }
}
 
class HomePage extends StatelessWidget {
  HomePage({super.key});
  // controller to retrieve the text
  TextEditingController controller = TextEditingController();
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          TextField(
            controller: controller,
          ),
          SizedBox(
            height: 30,
          ),
          ElevatedButton(
            onPressed: () {
              Clipboard.setData(new ClipboardData(text: controller.text))
                  .then((_) {
                controller.clear();
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text("Copied to your clipboard !")));
              });
            },
            child: const Text("Copy"),
          ),
          SizedBox(
            height: 50,
          ),
        ],
      ),
    );
  }
}

Выход:

Technical Scripter Flutter Dart

Flutter — добавить копию в буфер обмена без пакета

Пошаговая реализация

Окончательный код

Dart

РЕКОМЕНДУЕМЫЕ СТАТЬИ