Если вы Flutter Engineer и ищете способ, чтобы ваше приложение поддерживало возможность делать снимки экрана, используйте этот «снимок экрана». Это довольно полезный пакет, разработанный для этой конкретной цели и многих других, которые будут рассмотрены позже в середине этой статьи. Итак, давайте изучим это.
Содержание
Установка и настройка пакета
Захват виджетов в виде изображений
Захват неотрендеренных виджетов
Сохранение захваченного изображения
Совместное использование захваченного изображения
Мы рассмотрим все эти разделы один за другим, чтобы иметь полное представление обо всем.
1- Установка и настройка пакета
Сначала перейдите на pub.dev, найдите «скриншот» и установите оттуда.
Установите этот пакет с помощью первого подхода
— — — — — — -or — — — — — -
Запишите эту команду в терминале
flutter pub add screenshot
После того, как мы закончим. Давайте создадим сценарий для нашего проекта.
Структура проекта
Создайте виджет с отслеживанием состояния и создайте несколько случайных виджетов, точно так же, как мы делаем с нашими повседневными тренировочными приложениями.
Примечание. Вы будете использовать один и тот же подход для своих реальных, средних или сложных проектов. В своих статьях я всегда изо всех сил стараюсь создать этот импульс, чтобы любой, кто читает мои материалы, не сталкивался с какими-либо проблемами (относительно этого домена) в будущем.
Однако этот пакет имеет различные подходы к использованию, поэтому давайте рассмотрим их.
Перейдем к следующему разделу…
2- Захват виджетов в виде изображений
Это первый подход, который мы будем использовать в пакете «скриншот».
Сначала создайте экземпляр «ScreenshotController».
ScreenshotController screenshotController = ScreenshotController();
Как мы и планировали, случайные виджеты станут структурой проекта. Я не буду упоминать нужные виджеты, а просто выделю их как «your_widget…».
Рассмотрим этот фрагмент
body: Screenshot<Widget>( controller: screenshotController, child: your_widget()... ),
Примечание. Мы можем обернуть любой виджет, чтобы захватить его как изображение. Ограничений нет.
Затем нам нужно событие обратного вызова для захвата снимков экрана. Для этого мы используем ElevatedButton и заполняем onPressed:
ElevatedButton(onPressed: () {
///Just capture
screenshotController.capture();
///Capture and save to a file
screenshotController.capture().then((img) {
image = img;
// image is of type Uint8List
});
}, child: const Text("Capture")),
На этом первый подход завершается.
3- Захват неотрендеренных виджетов
Как следует из названия, у нас не визуализируются/не отображаются виджеты на экране, вместо этого мы создаем их во время вызова захвата.
Позвольте мне показать вам образец фрагмента
ElevatedButton(onPressed: () {
///Just capture
screenshotController.captureFromWidget(your_widget());
///Capture and save to a file
screenshotController.captureFromWidget(your_widget(), delay: const Duration(seconds: 1)).then((value) {
image = value;
});
}, child: const Text("Capture")),
Здесь я просто заменил "capture" на "captureFromWidget" и применил небольшую задержку, чтобы задача могла выполняться гладко.
Таким образом, мы можем захватывать невидимые виджеты.
Здесь мы закончили со вторым.
4- Сохранение захваченного изображения
Теперь, чтобы сохранить наше захваченное изображение в галерее, нам нужно установить еще два пакета.
1- Заставка галереи изображений
2- Поставщик пути
Для всех подходов, упомянутых выше, изменение onPressedEvents с помощью «сохранения кода» приведет к созданию такого фрагмента.
ElevatedButton(onPressed: () async {
///Capture and saving to a file
screenshotController.captureFromWidget(your_widget(), delay: const Duration(seconds: 1)).then((value) async {
image = value;
final dir = await getApplicationDocumentsDirectory();
final imagePath = await File('${dir.path}/captured.png').create();
await imagePath.writeAsBytes(image!);
});
}, child: const Text("Capture")),
Здесь мы сделали следующие 3 шага, чтобы сохранить наше изображение в галерее.
Получен каталог (path_provider)
Создан формат файла
Сохранить в галерее
Наконец-то мы можем использовать Snack bar или Toast, чтобы сообщить об этом конечному пользователю.
Заглянем в последний.
5- Совместное использование захваченного изображения
Для этого нам нужно немного изменить наш проект.
Установите другой пакет с именем «share_plus».
И добавьте к существующему коду новую строку:
ElevatedButton(onPressed: () async {
///Capture and saving to a file
screenshotController.captureFromWidget(your_widget(), delay: const Duration(seconds: 1)).then((value) async {
image = value;
final dir = await getApplicationDocumentsDirectory();
final imagePath = await File('${dir.path}/captured.png').create();
await imagePath.writeAsBytes(image!);
///Share
await Share.shareFiles([imagePath.path]);
});
}, child: const Text("Capture")),
Мы закончили и с этим.
Наконец, мне нужно поделиться некоторыми ключевыми моментами, чтобы избавиться от любых проблем.
Ключевые моменты, которые следует помнить
Для пакета Gallery Saver добавьте:
android:requestLegacyExternalStorage="true"Внутренний ‹тег› приложения в AndroidManifest.xml
Во-вторых,
Используйте блок try-catch, чтобы избежать сбоев.
Пришло время подвести итоги этой статьи.
Вот и все!
Понравилась эта статья, 👏 и подписывайтесь на меня!!
Если я что-то пропустил, дайте мне знать в разделе ответов Medium.
Кроме того, дайте мне знать, если у вас есть какие-либо предложения для моей следующей статьи.
P.S. У меня есть собственный канал на YouTube, на который я загружаю контент, связанный с Flutter Series, GitHub и т. д. Если вы найдете материалы своего типа, ставьте лайк, делитесь и подписывайтесь, так как это мотивирует меня создавать для вас больше! Спасибо.
