Привет всем, добро пожаловать обратно в мой (потрясающий) учебник, LOL! Сегодня мы узнаем, как выбрать несколько изображений, используя GetX в качестве управления состоянием. Кто не знаком с GetX? Думаю, каждый разработчик Flutter знает, кто такой GetX. Хорошо, давайте кодировать!

Во-первых, давайте создадим простой HomeScreen.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('No Image Choosen'),
            const SizedBox(
              height: 30,
            ),
            ElevatedButton(onPressed: () {}, child: Text('Choose Image'))
          ],
        ),
      ),
    );
  }
}

Вы можете запустить код выше. И это даст вам такой результат

Хорошо, наш простой домашний экран работает. Давайте создадим функцию, которую мы можем использовать для выбора нескольких изображений. Как я уже говорил выше, в этом случае я буду использовать GetX для управления состоянием.

import 'dart:developer';
import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

class HomeController extends GetxController {
  // FOR PICK IMAGE
  final ImagePicker _picker = ImagePicker();

  // VARIABLE FOR DEFINE IS IMAGE 1, IMAGE 2, OR IMAGE 3
  final Rx<File> _image = File('').obs;
  Rx<File> get image => _image;

  final Rx<File> _image2 = File('').obs;
  Rx<File> get image2 => _image2;

  final Rx<File> _image3 = File('').obs;
  Rx<File> get image3 => _image3;

  final RxList<File> _listImage = <File>[].obs;

  void pickImage({required String imageType}) async {
    try {
      List<File> tempImg = [];
      if (imageType == 'firstImage') {
        XFile? img = await _picker.pickImage(source: ImageSource.camera);
        _image.value = File(img!.path);
        tempImg.add(_image.value);
      }
      if (imageType == 'secondImage') {
        XFile? img = await _picker.pickImage(source: ImageSource.camera);
        _image2.value = File(img!.path);
        tempImg.add(_image.value);
      }
      if (imageType == 'thirdImage') {
        XFile? img = await _picker.pickImage(source: ImageSource.camera);
        _image3.value = File(img!.path);
        tempImg.add(_image.value);
      }
      for (var element in tempImg) {
        _listImage.add(element);
      }
      log('LIST IMAGE $_listImage');
    } catch (e) {
      log('ERROR $e');
    }
  }
}

Большой! Выше мы определили переменные, которые мы можем использовать для нашей функции. Как видите, я создаю три одинаковые переменные (изображение, изображение2 и изображение3). В моем сценарии я буду использовать эти переменные для сохранения значения нескольких изображений. Достаточно просто, не так ли?

Почему я использую параметры в нашей функции выбора изображения? Ответ прост, потому что я просто использую функцию on для выбора изображения. Я думаю, мне нужно сделать некоторую условную функцию, основанную на этих параметрах. Я надеюсь, вы поняли мою точку зрения.

Давайте перейдем к нашему домашнему экрану. Я обновлю свой домашний экран, и давайте посмотрим на нашу идею с множественным выбором изображения, работает ли она именно так, как мы хотим?

Потрясающий! Мы просто реализуем, как выбрать несколько изображений во Flutter, используя список. Хорошо, я думаю, что сегодняшний урок завершен. Вы можете задать мне вопрос, отправив комментарий ниже, если у вас есть вопрос. До скорой встречи в другом замечательном уроке! Увидимся!

https://github.com/purboindra/pick_multiple_image