Flutter / multi_image_picker Asset을 Image로 보이게 하기

 

Flutter에서 사진을 다룰때 보통 image_picker, multi_image_picker를 많이 활용하실 텐데요. image_picker는 그냥 File을 반환하기 때문에 쉽습니다. 하지만 multi_image_picker는 Asset으로 반환해서 다루기 까다로운 부분이 있습니다. 특히 Asset을 이미지로 보여줘야 할때 AssetThumb를 사용하면 사진이 깨져서 나오기 때문에 곤란한 경우가 발생합니다. 이럴때 Image.memory()를 활용하여 퀄리티 높은 사진을 보여줄 수 있는 방법에 대해서 말해보겠습니다. 알고리즘은 간단합니다. 

 

1. initState에서 Asset.file.getByteData(quality : x)를 await으로 호출해서 ByteData를 저장한다.

2. setState({})를 호출한다.

3. 저장한 ByteData를 ByteData.buffer.asUint8List()를 활용해서 Image.memory를 활용하여 이미지를 보여준다.

 

이제 코드로 한 번 봅시다.

// 시나리오 : Asset을 TestWidget으로 넘겨주면 TestWidget에서 이미지로 보여준다.



class TestWidget extends StatefulWidget {
	final Asset asset;
    
    TestWidget({
    	@required this.asset,
    });
    
    .... 생략
}

class TestWidgetState extends State<TestWidget> {
    ByteData byteData;
    
    @override initState() {
    	super.initState();
        
        convertAssetToByteData();
    }
    
    Future<void> convertAssetToByteData() async {
    	byteData = await widget.asset.file.getByteData( // 1번 
        	quality: 50,
        );
        
        setState(() {}); // 2번
    }
    
    @override
    Widget build(BuildContext context) {
    	return Image.memory( // 다른 위젯을 많이 감쌀 수 있지만 귀찮기 때문에 생략
        	byteData.buffer.asUint8List(),
        );
    }
}

이상으로 짧은 포스트 마치겠습니다. 봐주셔서 감사합니다 :)