[flutter] 플러터에서 훅(hook)을 사용해 스크린샷 기능 추가하기

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다보면, 종종 화면의 스크린샷을 찍어 저장하거나 공유해야 하는 경우가 있습니다. 이번 블로그 포스트에서는 플러터의 훅(hook)을 사용하여 간단한 스크린샷 기능을 추가하는 방법에 대해 알아보겠습니다.

플러터 훅(hook)

플러터 2.3버전부터 훅(hook)이라는 기능이 추가되었습니다. 이를 활용하면 상태 변화를 감지하고 해당 변화에 따라 특정 기능을 실행할 수 있습니다. 이러한 특성을 활용하여 스크린샷 기능을 추가할 수 있습니다.

스크린샷 기능 추가하기

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    GlobalKey _globalKey = GlobalKey();

    takeScreenshot() async {
      RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage();
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();
      // Save or share the screenshot
    }

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screenshot Example'),
        ),
        body: Center(
          child: RepaintBoundary(
            key: _globalKey,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Text('This is a widget for screenshot'),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: takeScreenshot,
          child: Icon(Icons.camera_alt),
        ),
      ),
    );
  }
}

위의 예제 코드는 훅을 사용하여 화면의 스크린샷을 찍는 간단한 기능을 구현한 것입니다. 이를 실행하면 ‘camera_alt’ 아이콘이 있는 플로팅 액션 버튼을 터치했을 때, 해당 화면의 스크린샷을 찍어 저장하거나 공유할 수 있습니다.

훅을 사용하여 스크린샷을 찍는 방법을 살펴봤고, 이를 활용하여 원하는 기능을 추가할 수 있습니다. 플러터의 훅을 활용하여 화면과 상태 변화를 감지하고 이에 따른 기능들을 추가하는 데 유용하게 활용할 수 있습니다.

결론

플러터의 훅을 사용하여 화면의 스크린샷을 찍는 기능을 추가하는 방법에 대해 알아보았습니다. 이를 통해 원하는 시점에 스크린샷을 찍는 등 다양한 기능들을 플러터 앱에 추가할 수 있습니다. 훅을 활용하여 더 다양하고 유연한 기능들을 구현해보시기 바랍니다.

참고문헌: