Создайте приложение Flutter, реализующее средство выбора изображений из камеры и галереи

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

Зависимости

Для начала добавьте в файл pubspec.yaml следующие зависимости:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4

После добавления зависимостей запустите flutter packages get, чтобы загрузить и установить их.

Импорт пакета

В файле, в котором вы будете реализовывать функцию выбора изображений, импортируйте необходимые пакеты:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

Создайте StatefulWidget

Поскольку нам нужно обновлять пользовательский интерфейс при выборе изображения, мы создадим StatefulWidget для управления состоянием. Создайте новый класс, расширяющий StatefulWidget. В этом примере мы назовем его ImagePickerDemo.

class ImagePickerDemo extends StatefulWidget {
  @override
  _ImagePickerDemoState createState() => _ImagePickerDemoState();
}
class _ImagePickerDemoState extends State<ImagePickerDemo> {
  // Implementation goes here
}

Определить состояние

В классе _ImagePickerDemoState определите переменную для хранения выбранного изображения. Мы будем использовать тип File из библиотеки dart:io.

class _ImagePickerDemoState extends State<ImagePickerDemo> {
  File? _image;
  // Rest of the implementation
}

Создание функций выбора изображений

Теперь давайте создадим две функции для обработки выбора изображений с камеры и из галереи. Эти функции будут использовать класс ImagePicker из пакета image_picker.

class _ImagePickerDemoState extends State<ImagePickerDemo> {
  // ... previous code ...
  Future<void> _pickImageFromCamera() async {
    final pickedImage = await ImagePicker().pickImage(source: ImageSource.camera);
    setState(() {
      _image = File(pickedImage!.path);
    });
  }
  Future<void> _pickImageFromGallery() async {
    final pickedImage = await ImagePicker().pickImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedImage!.path);
    });
  }
}

Создайте пользовательский интерфейс

Давайте создадим простой пользовательский интерфейс, чтобы продемонстрировать функциональность средства выбора изображений. У нас будет Column с двумя кнопками для выбора изображения с камеры и галереи, а также виджет Image для отображения выбранного изображения.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Image Picker Demo')),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _image == null
              ? Text('No image selected.')
              : Image.file(_image!, height: 300, width: 300),
          SizedBox(height: 20),
          ElevatedButton.icon(
            onPressed: _pickImageFromCamera,
            icon: Icon(Icons.camera),
            label: Text('Pick from Camera'),
          ),
          SizedBox(height: 10),
          ElevatedButton.icon(
            onPressed: _pickImageFromGallery,
            icon: Icon(Icons.photo_album),
            label: Text('Pick from Gallery'),
          ),
        ],
      ),
    ),
  );
}

Собираем все вместе

Вот полный код ImagePickerDemo StatefulWidget:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImagePickerDemo extends StatefulWidget {
  @override
  _ImagePickerDemoState createState() => _ImagePickerDemoState();
}
class _ImagePickerDemoState extends State<ImagePickerDemo> {
  File? _image;
  Future<void> _pickImageFromCamera() async {
    final pickedImage = await ImagePicker().pickImage(source: ImageSource.camera);
    setState(() {
      _image = File(pickedImage!.path);
    });
  }
  Future<void> _pickImageFromGallery() async {
    final pickedImage = await ImagePicker().pickImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedImage!.path);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Picker Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _image == null
                ? Text('No image selected.')
                : Image.file(_image!, height: 300, width: 300),
            SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: _pickImageFromCamera,
              icon: Icon(Icons.camera),
              label:Text('Pick from Camera'),
            ),
            SizedBox(height: 10),
            ElevatedButton.icon(
              onPressed: _pickImageFromGallery,
              icon: Icon(Icons.photo_album),
              label: Text('Pick from Gallery'),
            ),
          ],
        ),
      ),
    );
  }
}

Применение

Чтобы использовать виджет ImagePickerDemo в своем приложении, просто включите его в дерево виджетов. Например, в вашем файле main.dart вы можете заменить свойство home вашего MaterialApp на ImagePickerDemo():

import 'package:flutter/material.dart';
import 'package:your_app/image_picker_demo.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImagePickerDemo(),
    );
  }
}

Заключение

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