Flutter) Multi Image Picker

 학생 편의를 위한 어플리케이션을 동아리원들과 함께 만들고 있다. 그 중 학교내 행사를 등록하고 보여줄수 있는 페이지가 있다. 하지만 하나의 이미지만으로는 해당 행사가 어떤것임을 제대로 알려주지 못하는 경우도 있고 여러가지의 사진을 한번에 넣을수 있도록 하는게 더 좋을것 같다는 의견이 있었다. 그래서 해당 기능을 찾다 보니 multi_image_picker라는 좋은 패키지가 있었다.

 해당 패키지는 아래에 링크에 존재한다. https://pub.dev/packages/multi_image_picker#-readme-tab-

multi_image_picker | Flutter Package

해당 image_picker는 기존의 image_picker와 달리 File 타입이 아닌 Asset 타입의 리스트로 받게 된다는것에 유의하여야 한다.

 

1. 시작

• 먼저 multi image picker를 사용할수 있는 버튼을 만들어 주는 과정을 거친다.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            OutlineButton(
              borderSide: BorderSide(color: Colors.blue[200], width: 3),
              child: Container(
                alignment: Alignment.center,
                height: 30,
                width: 250,
                child: Text(
                  '갤러리',
                  style: TextStyle(fontSize: 20),
                ),
              ),
              onPressed: () {
                print('hi');
              },
            )
          ],
        ),
      ),
    );
  }
}

 

2. onPressed 시 작동해야할 함수와 필요한 List<Asset>을 만들어 주도록 한다.

• 해당 getImage() 함수는 위의 코드중 onPressed의 print('hi');를 대체하여 주면 된다.
• List<Asset> imageList 변수를 해당 클래스에 선언을 해준다.
• => 이것은 Multiple image picker에서 선택한 이미지 리스트를 받기 위한 리스트라고 생각을 하면된다.
• 여기서 maxImage는 최대 몇개의 사진을 선택할수 있는지를 설정하고 
• selectedAssets라는 옵션도 존재하는데 해당 옵션에는 List<Asset>을 받고 List속 Asset들을 default값으로 선택하고 있는다.

 

getImage() async {
    List<Asset> resultList = List<Asset>();
    resultList =
        await MultiImagePicker.pickImages(maxImages: 10, enableCamera: true);
    setState(() {
      imageList = resultList;
    });
  }
 // ------------------------------selectedAsset option사용-----------------------------
  getImage() async {
    List<Asset> resultList = List<Asset>();
    resultList =
        await MultiImagePicker.pickImages(
        	maxImages: 10, 
        	enableCamera: true,
        	slecetedAsset:imageList
         );
    setState(() {
      imageList = resultList;
    });
  }

seletedAsset 설정 하지 않은것

selectedAsset 설정한것

3. imageList를 통해 화면 출력

• Asset 형식의 이미지를 그려주기 위해서는 multi_image_picker에서 제공해주는 AssetThumb를 이용하여 주면 된다.
• => 단지 리스트의 엘리먼트를 하나씩 넘겨주기만 하면 된다.
• scrollDirection : Axis.horizontal을 설정해주지 않으면 세로로 스크롤 되는 화면을 얻을수가 있다.
• 또한 ListView.Builder를 위한 Container height는 무조건 설정해주어야 한다.
• 아래는 전체 코드이다.

class _MyHomePageState extends State<MyHomePage> {
  List<Asset> imageList = List<Asset>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
          //새로이 추가된 부분!!! 사진을 화면에 그려주기 위한 부분이다.
            imageList.isEmpty
                ? Container()
                : Container(
                    height: 400,
                    width: MediaQuery.of(context).size.width,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: imageList.length,
                        itemBuilder: (BuildContext context, int index) {
                          Asset asset = imageList[index];
                          return AssetThumb(
                              asset: asset, width: 300, height: 300);
                        }),
                  ),
            OutlineButton(
              borderSide: BorderSide(color: Colors.blue[200], width: 3),
              child: Container(
                alignment: Alignment.center,
                height: 30,
                width: 250,
                child: Text(
                  '갤러리',
                  style: TextStyle(fontSize: 20),
                ),
              ),
              onPressed: () {
                getImage();
              },
            )
          ],
        ),
      ),
    );
  }

  getImage() async {
    List<Asset> resultList = List<Asset>();
    resultList =
        await MultiImagePicker.pickImages(maxImages: 10, enableCamera: true);
    setState(() {
      imageList = resultList;
    });
  }
}