[flutter] flutter 화면 full screenshot image file로 생성하기

 

안녕하세요? 오늘은 스크롤이 있는 flutter 화면 내에서 full screenshot을 image 파일로 생성하고 화면에 띄우는 방법을 정리합니다. 

 

RepaintBoundary 위젯을 사용해서 구현합니다. 

RepaintBoundary는 child에 대한 별도의 display 목록을 만드는 위젯입니다. 

 

먼저 Scaffold아래 singlechildscrollview를 생성해서 화면에 스크롤을 만듭니다. 

return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text('Long Screen Shot Test'),
      ),
      body: SingleChildScrollView(

 

클래스아래 GlobalKey를 선언해주고 내가 캡쳐하고 싶은 위젯은 RepaintBoundary 위젯으로 감싸줍니다. 

class _MyAppState extends State<MyApp> {
  static GlobalKey sskey = GlobalKey();
  Uint8List? imageData;
  
  
  RepaintBoundary(
    key: sskey,
    child: Column(

 

버튼을 누르면 해당 화면을 캡쳐해서 화면에 보여줄 수 있는 코드를 작성합니다. 

      RenderRepaintBoundary boundary = sskey.currentContext!
          .findRenderObject() as RenderRepaintBoundary;
      ui.Image image =
          await boundary.toImage(pixelRatio: 3.0);
      ByteData? byte = await image.toByteData(
          format: ui.ImageByteFormat.png);
      setState(() {
        imageData = byte!.buffer.asUint8List();
      });

 

그럼 이제 완성된 화면입니다.