[Flutter Library] multi_image_picker2

목적

멀티이미지 피커 라이브러리의 문서화

내용

1. .yaml
   multi_image_picker2: ^5.0.1

2. import
   import 'package:multi_image_picker2/multi_image_picker2.dart';

3. 멤버변수 선언

  List<Asset> images = new List();
String _error = 'No Error Dectected';

4. 버튼 생성

TextButton.icon(
                  onPressed: loadAssets,
                  label: Text('이미지 업로드'),
                  icon: Icon(Icons.image),
                  style: ButtonStyle(
                    foregroundColor:
                        MaterialStateProperty.all<Color>(Colors.greenAccent),
                  ),
                ),

5. loadAssets 메서드 정의

Future<void> loadAssets() async {
    List<Asset> resultList = List<Asset>();
    String error = 'No Error Dectected';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 10,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(
          takePhotoIcon: "chat",
          doneButtonTitle: "Fatto",
        ),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
      print('aaaa');
    } on Exception catch (e) {
      error = e.toString();
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
    });
  }

6. SingleChildScrollView Widget 정의

SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  children: List.generate(postImage.length, (index) {
                    MediaCollection url = postImage[index];
                    return Stack(
                      alignment: Alignment.topRight,
                      children: [
                        SizedBox(
                          child: Image.network(
                            url.fullPathS3,
                            fit: BoxFit.cover,
                          ),
                          height: 150,
                          width: 150,
                        ),
                        IconButton(
                            icon: Icon(Icons.highlight_remove),
                            onPressed: () {
                              setState(() {
                                deletedCollectionId.add(postImage[index].id);
                                postImage.removeAt(index);
                              });
                            }),
                      ],
                    );
                  })
                    ..addAll(
                      List.generate(images.length, (index) {
                        Asset asset = images[index];
                        return Stack(alignment: Alignment.topRight, children: [
                          AssetThumb(
                            asset: asset,
                            width: 150,
                            height: 150,
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.highlight_remove,
                              color: Colors.greenAccent,
                            ),
                            onPressed: () {
                              setState(() {
                                images.removeAt(index);
                              });
                            },
                            color: Colors.red,
                          ),
                          // Icon(Icons.remove_circle_outline),
                        ]);
                      }),
                    ),
                ),
              ),

7. Asset to Byte(S3 업로드를 위해서)

String boardImageList = "";
              String fileName = "";
              for (var o in images) {
                if (images.indexOf(o) != 0) {
                  ByteData byteData = await o.getByteData();
                  List<int> imageData = byteData.buffer.asUint8List();
                  boardImageList += ":${base64Encode(imageData)}";
                  fileName += ":${o.name}";
                } else {
                  ByteData byteData = await o.getByteData();
                  List<int> imageData = byteData.buffer.asUint8List();
                  boardImageList += "${base64Encode(imageData)}";
                  fileName += "${o.name}";
                }
              }

결론

라이브러리사용이 쉽고 맘에 들었지만 Asset을 Byte로 바꾸는 과정을 몰라 힘들었음.