Камера во Flutter

Hola, Amigos! С вами Саша Чаплыгин, Flutter-dev Amiga. Работаю над улучшением NDA-проекта — приложение, в котором используется камера для сканирования определенных элементов на товаре. Делюсь с вами обзором, как начать использовать камеру в приложении Flutter.

Нам понадобится пакет camera. Добавьте его в файл pubspec.yaml вашего проекта:

yaml
dependencies:
camera: ^0.9.4+5

После этого запустите flutter pub get для установки зависимостей.

Создадим свою собственную страницу.
Используем виджет CameraPreview для отображения камеры на экране. Для этого в initState инициализируем наш CameraController c использованием CameraDescription (полученным из availableCameras).

*код нашего виджета*
late CameraController _controller;

@override
void initState() {
super.initState();
_controller = CameraController(
widget.camera, // CameraDescription
ResolutionPreset.high,
);

_controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
if (!_controller.value.isInitialized) {
return Container();
}
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: CameraPreview(_controller), // кастомизируем тут
);
}
}

Теперь у нас есть экран камеры, добавим функционал для запуска и остановки камеры. Например, вы можете добавить кнопку «Сделать фото» и кнопку «Записать видео», добавив их в ваш кастомный виджет с экраном камеры.

FloatingActionButton(
onPressed: () async {
try {
if (!_controller.value.isInitialized) {
return;
}
final image = await _controller.takePicture();
// Обработка сохраненной фотографии
} catch (e) {
// Обработка ошибок
}
},
child: Icon(Icons.camera),
),
FloatingActionButton(
onPressed: () async {
try {
if (!_controller.value.isInitialized) {
return;
}
if (!_controller.value.isRecordingVideo) {
await _controller.startVideoRecording();
} else {
final video = await _controller.stopVideoRecording();
// Обработка сохраненного видео
}
} catch (e) {
// Обработка ошибок
}
},
child: Icon(
_controller.value.isRecordingVideo
? Icons.stop
: Icons.videocam,
),
),

Не забудьте добавить разрешение на доступ к камере в файлах Info.plist на iOS и в AndroidManifest.xml на Android. И обрабатывайте исключения, дабы не попасть впросак🙂 Удачи!

Пишите в комментариях было ли полезно и рассказывайте о своих проектах Flutter с камерой!