Flutter로 스크린 캡처와 녹화 기능 개발하기 🎥📸

안녕하세요, 플러터 개발자 여러분! 오늘은 정말 핫한 주제로 찾아왔어요. 바로 Flutter에서 스크린 캡처와 녹화 기능을 개발하는 방법에 대해 알아볼 거예요. 이 기능들은 요즘 앱에서 정말 많이 쓰이고 있죠. 인스타그램 스토리부터 시작해서 게임 플레이 녹화, 화면 공유 등등... 어디서나 볼 수 있는 필수 기능이 되어가고 있어요. 😎

여러분도 아시다시피, Flutter는 크로스 플랫폼 개발의 대세로 자리잡고 있어요. 한 번의 코딩으로 iOS와 Android 앱을 동시에 만들 수 있다니, 얼마나 편리한가요? 그런데 이런 편리함 속에서도 플랫폼 특화 기능을 구현하는 건 여전히 까다로운 부분이에요. 특히 스크린 캡처나 녹화 같은 기능은 더더욱 그렇죠.

하지만 걱정 마세요! 오늘 이 글을 다 읽고 나면, 여러분도 Flutter에서 스크린 캡처와 녹화 기능을 척척 구현할 수 있게 될 거예요. 마치 재능넷에서 고수의 재능을 사서 배운 것처럼 말이죠! 😉

자, 그럼 이제 본격적으로 시작해볼까요? 준비되셨나요? Let's Flutter! 🚀

1. 스크린 캡처 기능 구현하기 📸

먼저 스크린 캡처 기능부터 구현해볼게요. 이 기능은 사용자가 현재 보고 있는 화면을 이미지로 저장하는 거예요. 인스타그램 스토리나 카카오톡 채팅방 캡처 같은 걸 떠올리시면 돼요.

1.1 필요한 패키지 설치하기

Flutter에서 스크린 캡처 기능을 구현하려면 screenshot 패키지를 사용할 거예요. 이 패키지는 Flutter 위젯의 스크린샷을 쉽게 찍을 수 있게 해줘요.

먼저 pubspec.yaml 파일에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screenshot: ^1.3.0

그리고 터미널에서 다음 명령어를 실행해 패키지를 설치해주세요:


flutter pub get

이제 기본 준비는 끝났어요! 👍

1.2 스크린샷 위젯 만들기

이제 실제로 스크린샷을 찍을 위젯을 만들어볼 거예요. 다음 코드를 보세요:


import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';

class ScreenshotWidget extends StatefulWidget {
  @override
  _ScreenshotWidgetState createState() => _ScreenshotWidgetState();
}

class _ScreenshotWidgetState extends State<screenshotwidget> {
  ScreenshotController screenshotController = ScreenshotController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('스크린샷 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <widget>[
            Screenshot(
              controller: screenshotController,
              child: Container(
                padding: EdgeInsets.all(30.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent, width: 5.0),
                  color: Colors.amberAccent,
                ),
                child: Text(
                  "이 부분이 캡처됩니다!",
                  style: TextStyle(color: Colors.redAccent, fontSize: 30),
                ),
              ),
            ),
            SizedBox(height: 25),
            ElevatedButton(
              child: Text('스크린샷 찍기'),
              onPressed: () async {
                final image = await screenshotController.capture();
                if (image != null) {
                  // 여기서 이미지를 저장하거나 공유할 수 있어요
                  print('스크린샷 찍기 성공!');
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}
  </widget></screenshotwidget>

이 코드에서 주목해야 할 부분은 다음과 같아요:

ScreenshotController: 이 컨트롤러를 통해 스크린샷을 찍을 수 있어요.
Screenshot 위젯: 이 위젯 안에 있는 내용이 캡처돼요.
screenshotController.capture(): 이 메서드로 실제 스크린샷을 찍어요.

이렇게 하면 기본적인 스크린샷 기능이 구현돼요. 버튼을 누르면 지정된 영역의 스크린샷이 찍히는 거죠. 근데 이게 끝일까요? 아니죠! 우리는 더 나아갈 거예요. 😎

1.3 스크린샷 저장하기

찍은 스크린샷을 저장해야 진정한 의미가 있겠죠? 이를 위해 path_provider와 image 패키지를 추가로 사용할 거예요.

pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screenshot: ^1.3.0
  path_provider: ^2.0.11
  image: ^3.2.0

그리고 다시 flutter pub get을 실행해주세요.

이제 스크린샷을 저장하는 코드를 추가해볼게요:


import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:image/image.dart' as img;

// ... (이전 코드는 그대로 유지)

ElevatedButton(
  child: Text('스크린샷 찍고 저장하기'),
  onPressed: () async {
    final image = await screenshotController.capture();
    if (image != null) {
      final directory = await getApplicationDocumentsDirectory();
      final imagePath = await File('${directory.path}/screenshot.png').create();
      await imagePath.writeAsBytes(image);
      
      // 이미지 압축
      final compressedImage = img.decodeImage(image);
      final compressedFile = File('${directory.path}/compressed_screenshot.jpg');
      await compressedFile.writeAsBytes(img.encodeJpg(compressedImage!, quality: 85));
      
      print('스크린샷이 저장되었어요: ${imagePath.path}');
      print('압축된 스크린샷이 저장되었어요: ${compressedFile.path}');
    }
  },
),

우와, 이제 정말 멋진 기능이 완성됐어요! 😍 이 코드는 다음과 같은 일을 해요:

스크린샷을 찍어요.
앱의 문서 디렉토리에 PNG 형식으로 원본 이미지를 저장해요.
이미지를 압축하고 JPG 형식으로 저장해요. (용량 절약!)

이렇게 하면 사용자가 찍은 스크린샷을 앱 내에 저장할 수 있어요. 근데 잠깐, 여기서 끝내기엔 아쉽지 않나요? 우리 조금 더 나아가볼까요? 🤔

1.4 스크린샷 공유하기

요즘 시대에 찍기만 하고 공유를 못 한다? 말도 안 되죠! 스크린샷을 다른 앱으로 공유하는 기능도 추가해볼게요. 이를 위해 share_plus 패키지를 사용할 거예요.

다시 pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screenshot: ^1.3.0
  path_provider: ^2.0.11
  image: ^3.2.0
  share_plus: ^4.0.10

그리고 또 flutter pub get을 실행해주세요. (이제 익숙해지셨죠? 😉)

이제 공유 기능을 추가해볼게요:


import 'package:share_plus/share_plus.dart';

// ... (이전 코드는 그대로 유지)

ElevatedButton(
  child: Text('스크린샷 찍고 공유하기'),
  onPressed: () async {
    final image = await screenshotController.capture();
    if (image != null) {
      final directory = await getApplicationDocumentsDirectory();
      final imagePath = await File('${directory.path}/screenshot.png').create();
      await imagePath.writeAsBytes(image);
      
      // 이미지 공유
      await Share.shareFiles([imagePath.path], text: '내가 찍은 멋진 스크린샷!');
      
      print('스크린샷을 공유했어요!');
    }
  },
),

짜잔! 🎉 이제 사용자가 스크린샷을 찍고 바로 다른 앱으로 공유할 수 있어요. 카카오톡으로 보내거나, 인스타 스토리에 올리거나, 이메일로 보내거나... 가능성은 무한대죠!

여기까지 오신 여러분, 정말 대단해요! 이제 Flutter에서 스크린 캡처 기능의 기본을 완전히 마스터하셨어요. 근데 잠깐, 우리의 여정이 여기서 끝날 리가 없죠? 이제 더 심화된 내용으로 들어가볼게요! 🚀

2. 스크린 녹화 기능 구현하기 🎥

자, 이제 스크린 캡처보다 한 단계 더 나아가 볼까요? 바로 스크린 녹화 기능이에요! 이 기능은 게임 플레이 영상을 찍거나, 앱 사용법을 설명하는 튜토리얼 영상을 만들 때 정말 유용해요. 심지어 재능넷에서 자신의 재능을 소개하는 영상을 만들 때도 쓸 수 있겠네요! 😉

2.1 필요한 패키지 설치하기

Flutter에서 스크린 녹화 기능을 구현하려면 screen_recorder 패키지를 사용할 거예요. 이 패키지는 아직 완벽하지는 않지만, 기본적인 녹화 기능을 제공해줘요.

pubspec.yaml 파일에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screen_recorder: ^0.2.0

그리고 터미널에서 다음 명령어를 실행해 패키지를 설치해주세요:


flutter pub get

좋아요, 이제 기본 준비는 끝났어요! 🎬

2.2 스크린 녹화 위젯 만들기

이제 실제로 화면을 녹화할 위젯을 만들어볼 거예요. 다음 코드를 보세요:


import 'package:flutter/material.dart';
import 'package:screen_recorder/screen_recorder.dart';

class ScreenRecorderWidget extends StatefulWidget {
  @override
  _ScreenRecorderWidgetState createState() => _ScreenRecorderWidgetState();
}

class _ScreenRecorderWidgetState extends State<screenrecorderwidget> {
  final _controller = ScreenRecorderController(
    pixelRatio: 0.5,
    skipFramesBetweenCaptures: 2,
  );
  bool _isRecording = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('스크린 녹화 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <widget>[
            ScreenRecorder(
              controller: _controller,
              child: Container(
                width: 300,
                height: 300,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    '이 부분이 녹화됩니다!',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text(_isRecording ? '녹화 중지' : '녹화 시작'),
              onPressed: () {
                setState(() {
                  _isRecording = !_isRecording;
                });
                if (_isRecording) {
                  _controller.start();
                } else {
                  _controller.stop();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}
  </widget></screenrecorderwidget>

우와, 이 코드 정말 대단하지 않나요? 😮 여기서 주목해야 할 부분은 다음과 같아요:

ScreenRecorderController: 이 컨트롤러를 통해 녹화를 시작하고 중지할 수 있어요.
ScreenRecorder 위젯: 이 위젯 안에 있는 내용이 녹화돼요.
_controller.start()와 _controller.stop(): 이 메서드로 실제 녹화를 시작하고 중지해요.

이렇게 하면 기본적인 스크린 녹화 기능이 구현돼요. 버튼을 누르면 지정된 영역의 녹화가 시작되고, 다시 누르면 중지되는 거죠. 근데 이게 끝일까요? 당연히 아니죠! 우리는 더 나아갈 거예요. 💪

2.3 녹화 영상 저장하기

녹화한 영상을 저장해야 진정한 의미가 있겠죠? 이를 위해 path_provider와 video_player 패키지를 추가로 사용할 거예요.

pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screen_recorder: ^0.2.0
  path_provider: ^2.0.11
  video_player: ^2.4.7

그리고 다시 flutter pub get을 실행해주세요.

이제 녹화 영상을 저장하는 코드를 추가해볼게요:


import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:video_player/video_player.dart';

// ... (이전 코드는 그대로 유지)

ElevatedButton(
  child: Text(_isRecording ? '녹화 중지 및 저장' : '녹화 시작'),
  onPressed: () async {
    setState(() {
      _isRecording = !_isRecording;
    });
    if (_isRecording) {
      await _controller.start();
    } else {
      final video = await _controller.stop();
      final directory = await getApplicationDocumentsDirectory();
      final videoPath = '${directory.path}/screen_recording.mp4';
      final videoFile = File(videoPath);
      await videoFile.writeAsBytes(video);
      print('녹화 영상이 저장되었어요: $videoPath');

      // 저장된 영상 재생
      final videoPlayerController = VideoPlayerController.file(videoFile);
      await videoPlayerController.initialize();
      await videoPlayerController.play();
    }
  },
),

와우, 이제 정말 멋진 기능이 완성됐어요! 🎉 이 코드는 다음과 같은 일을 해요:

화면을 녹화해요.
녹화가 끝나면 앱의 문서 디렉토리에 MP4 형식으로 영상을 저장해요.
저장된 영상을 바로 재생할 수 있어요.

이렇게 하면 사용자가 녹화한 영상을 앱 내에 저장하고 바로 확인할 수 있어요. 근데 잠깐, 여기서 끝내기엔 아쉽지 않나요? 우리 조금 더 나아가볼까요? 🤔

2.4 녹화 영상 공유하기

녹화만 하고 공유를 못 한다? 그건 말이 안 되죠! 녹화한 영상을 다른 앱으로 공유하는 기능도 추가해볼게요. 이를 위해 share_plus 패키지를 사용할 거예요.

다시 pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  screen_recorder: ^0.2.0
  path_provider: ^2.0.11
  video_player: ^2.4.7
  share_plus: ^4.0.10

그리고 또 flutter pub get을 실행해주세요. (이제 정말 익숙해지셨죠? 😉)

이제 공유 기능을 추가해볼게요:


import 'package:share_plus/share_plus.dart';

// ... (이전 코드는 그대로 유지)

ElevatedButton(
  child: Text('녹화 영상 공유하기'),
  onPressed: () async {
    final directory = await getApplicationDocumentsDirectory();
    final videoPath = '${directory.path}/screen_recording.mp4';
    final videoFile = File(videoPath);
    
    if (await videoFile.exists()) {
      await Share.shareFiles([videoPath], text: '내가 녹화한 멋진 영상!');
      print('녹화 영상을 공유했어요!');
    } else {
      print('공유할 녹화 영상이 없어요 ㅠㅠ');
    }
  },
),

짜잔! 🎉 이제 사용자가 녹화한 영상을 바로 다른 앱으로 공유할 수 있어요. 유튜브에 올리거나, 카카오톡으로 보내거나, 인스타 스토리에 올리거나... 가능성은 무한대죠!

여기까지 오신 여러분, 정말 대단해요! 이제 Flutter에서 스크린 녹화 기능의 기본을 완전히 마스터하셨어요. 근데 잠깐, 우리의 여정이 여기서 끝날 리가 없죠? 이제 더 심화된 내용으로 들어가볼게요! 🚀

3. 고급 기능 구현하기 🔧

자, 이제 우리는 기본적인 스크린 캡처와 녹화 기능을 마스터했어요. 하지만 진정한 개발자는 여기서 멈추지 않죠! 이제 우리의 앱을 더욱 특별하고 유용하게 만들어줄 고급 기능들을 구현해볼 거예요. 마치 재능넷에서 고급 재능을 가진 사람들처럼 말이에요! 😎

3.1 워터마크 추가하기

스크린샷이나 녹화 영상에 워터마크를 추가하면 어떨까요? 이렇게 하면 우리 앱의 브랜딩도 할 수 있고, 저작권 보호에도 도움이 될 거예요.

먼저 스크린샷에 워터마크를 추가하는 코드를 봐볼게요:


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

Future<ui.image> addWatermarkToScreenshot(ui.Image screenshot) async {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  final size = Size(screenshot.width.toDouble(), screenshot.height.toDouble());
  
  // 스크린샷 그리기
  canvas.drawImage(screenshot, Offset.zero, Paint());
  
  // 워터마크 텍스트 스타일 설정
  final textStyle = TextStyle(
    color: Colors.white.withOpacity(0.5),
    fontSize: 40,
    fontWeight: FontWeight.bold,
  );
  final textSpan = TextSpan(
    text: 'My Awesome App',
    style: textStyle,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(minWidth: 0, maxWidth: size.width);
  
  // 워터마크 위치 설정 (오른쪽 아래 구석)
  final offset = Offset(
    size.width - textPainter.width - 20,
    size.height - textPainter.height - 20,
  );
  
  // 워터마크 그리기
  textPainter.paint(canvas, offset);
  
  return recorder.endRecording().toImage(size.width.toInt(), size.height.toInt());
}

// 스크린샷 찍을 때 이 함수를 호출
ElevatedButton(
  child: Text('워터마크 있는 스크린샷 찍기'),
  onPressed: () async {
    final image = await screenshotController.capture();
    if (image != null) {
      final screenshot = await decodeImageFromList(image);
      final watermarkedScreenshot = await addWatermarkToScreenshot(screenshot);
      // 여기서 watermarkedScreenshot을 저장하거나 공유할 수 있어요
    }
  },
),
  </ui.image>

우와, 이제 우리 앱의 로고가 들어간 멋진 스크린샷을 찍을 수 있게 됐어요! 🖼️

녹화 영상에 워터마크를 추가하는 건 조금 더 복잡해요. 영상의 각 프레임마다 워터마크를 추가해야 하거든요. 하지만 걱정 마세요, 우리가 할 수 있어요!


import 'package:ffmpeg_kit_flutter/ffmpeg_kit.dart';

Future<void> addWatermarkToVideo(String inputPath, String outputPath) async {
  final command = '-i $inputPath -vf "drawtext=text=\'My Awesome App\':fontcolor=white@0.5:fontsize=24:box=1:boxcolor=black@0.5:boxborderw=5:x=(w-tw)/2:y=h-th-10" -codec:a copy $outputPath';
  
  await FFmpegKit.execute(command);
}

// 녹화 중지 후 이 함수를 호출
ElevatedButton(
  child: Text('워터마크 있는 영상 저장'),
  onPresse  d: () async {
    final video = await _controller.stop();
    final directory = await getApplicationDocumentsDirectory();
    final inputPath = '${directory.path}/original_recording.mp4';
    final outputPath = '${directory.path}/watermarked_recording.mp4';
    
    // 원본 영상 저장
    final inputFile = File(inputPath);
    await inputFile.writeAsBytes(video);
    
    // 워터마크 추가
    await addWatermarkToVideo(inputPath, outputPath);
    
    print('워터마크가 추가된 영상이 저장되었어요: $outputPath');
  },
),
  </void>

이제 우리 앱의 로고가 들어간 멋진 영상을 만들 수 있게 됐어요! 🎥✨

3.2 얼굴 인식 및 블러 처리

개인정보 보호가 중요한 시대잖아요. 스크린샷이나 녹화 영상에서 얼굴을 자동으로 인식하고 블러 처리하는 기능을 추가해볼까요?

이를 위해 google_ml_kit 패키지를 사용할 거예요. 먼저 pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  google_ml_kit: ^0.7.3

그리고 flutter pub get을 실행해주세요.

이제 얼굴 인식 및 블러 처리 코드를 추가해볼게요:


import 'package:google_ml_kit/google_ml_kit.dart';
import 'dart:ui' as ui;

Future<ui.image> blurFacesInImage(ui.Image image) async {
  final inputImage = InputImage.fromBytes(
    bytes: await image.toByteData(format: ui.ImageByteFormat.png),
    inputImageData: InputImageData(
      size: Size(image.width.toDouble(), image.height.toDouble()),
      imageRotation: InputImageRotation.Rotation_0deg,
      inputImageFormat: InputImageFormat.NV21,
      planeData: [],
    ),
  );

  final faceDetector = GoogleMlKit.vision.faceDetector();
  final List<face> faces = await faceDetector.processImage(inputImage);

  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  canvas.drawImage(image, Offset.zero, Paint());

  for (Face face in faces) {
    final rect = face.boundingBox;
    canvas.drawRect(
      rect,
      Paint()..color = Colors.black.withOpacity(0.5),
    );
  }

  return recorder.endRecording().toImage(image.width, image.height);
}

// 스크린샷 찍을 때 이 함수를 호출
ElevatedButton(
  child: Text('얼굴 블러 처리된 스크린샷 찍기'),
  onPressed: () async {
    final image = await screenshotController.capture();
    if (image != null) {
      final screenshot = await decodeImageFromList(image);
      final blurredScreenshot = await blurFacesInImage(screenshot);
      // 여기서 blurredScreenshot을 저장하거나 공유할 수 있어요
    }
  },
),
  </face></ui.image>

와우! 이제 우리 앱은 개인정보 보호에도 신경 쓰는 똑똑한 앱이 됐어요! 👏

3.3 음성 녹음 추가하기

화면 녹화만으로는 부족하다고요? 음성 녹음 기능도 추가해볼까요? 이렇게 하면 사용자가 화면을 녹화하면서 동시에 설명을 녹음할 수 있어요.

이를 위해 flutter_sound 패키지를 사용할 거예요. pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  flutter_sound: ^8.3.9

그리고 flutter pub get을 실행해주세요.

이제 음성 녹음 기능을 추가해볼게요:


import 'package:flutter_sound/flutter_sound.dart';

class _ScreenRecorderWidgetState extends State<screenrecorderwidget> {
  final _recorder = FlutterSoundRecorder();
  bool _isRecorderInitialized = false;

  @override
  void initState() {
    super.initState();
    _initRecorder();
  }

  Future<void> _initRecorder() async {
    await _recorder.openRecorder();
    _isRecorderInitialized = true;
  }

  Future<void> _startRecording() async {
    if (!_isRecorderInitialized) return;
    await _recorder.startRecorder(toFile: 'audio.aac');
  }

  Future<void> _stopRecording() async {
    if (!_isRecorderInitialized) return;
    await _recorder.stopRecorder();
  }

  @override
  void dispose() {
    _recorder.closeRecorder();
    super.dispose();
  }

  // ... (이전 코드는 그대로 유지)

  ElevatedButton(
    child: Text(_isRecording ? '녹화 및 녹음 중지' : '녹화 및 녹음 시작'),
    onPressed: () async {
      setState(() {
        _isRecording = !_isRecording;
      });
      if (_isRecording) {
        await _controller.start();
        await _startRecording();
      } else {
        final video = await _controller.stop();
        await _stopRecording();
        // 여기서 video와 audio를 합치는 로직을 추가할 수 있어요
      }
    },
  ),
}
  </void></void></void></screenrecorderwidget>

대단해요! 이제 우리 앱은 화면 녹화와 음성 녹음을 동시에 할 수 있는 멀티태스킹 능력자가 됐어요! 🎤🎥

3.4 녹화 미리보기 및 편집 기능

마지막으로, 녹화가 끝난 후 사용자가 영상을 미리보고 간단히 편집할 수 있는 기능을 추가해볼까요? 이를 위해 video_player와 video_trimmer 패키지를 사용할 거예요.

pubspec.yaml에 다음 내용을 추가해주세요:


dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.7
  video_trimmer: ^1.1.3

그리고 flutter pub get을 실행해주세요.

이제 녹화 미리보기 및 편집 기능을 추가해볼게요:


import 'package:video_player/video_player.dart';
import 'package:video_trimmer/video_trimmer.dart';

class VideoPreviewScreen extends StatefulWidget {
  final String videoPath;

  VideoPreviewScreen({required this.videoPath});

  @override
  _VideoPreviewScreenState createState() => _VideoPreviewScreenState();
}

class _VideoPreviewScreenState extends State<videopreviewscreen> {
  late VideoPlayerController _controller;
  final Trimmer _trimmer = Trimmer();

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.file(File(widget.videoPath))
      ..initialize().then((_) {
        setState(() {});
      });
    _loadVideo();
  }

  void _loadVideo() {
    _trimmer.loadVideo(videoFile: File(widget.videoPath));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('녹화 미리보기 및 편집')),
      body: Column(
        children: [
          _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : CircularProgressIndicator(),
          VideoViewer(trimmer: _trimmer),
          TrimEditor(
            trimmer: _trimmer,
            viewerHeight: 50.0,
            viewerWidth: MediaQuery.of(context).size.width,
            maxVideoLength: Duration(seconds: 30),
            onChangeStart: (value) {},
            onChangeEnd: (value) {},
            onChangePlaybackState: (value) {},
          ),
          ElevatedButton(
            child: Text('편집 완료'),
            onPressed: () async {
              await _trimmer.saveTrimmedVideo(
                startValue: 0,
                endValue: _controller.value.duration.inMilliseconds.toDouble(),
                onSave: (outputPath) {
                  // 여기서 편집된 영상을 저장하거나 공유할 수 있어요
                },
              );
            },
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
  </videopreviewscreen>

와우! 이제 우리 앱은 완벽한 스크린 레코더가 됐어요! 😎 사용자들은 화면을 녹화하고, 음성을 녹음하고, 얼굴을 블러 처리하고, 워터마크를 추가하고, 심지어 영상을 편집까지 할 수 있게 됐어요. 이 정도면 재능넷에서 최고의 재능을 가진 개발자라고 해도 과언이 아니겠죠? 👨‍💻👩‍💻

여러분, 정말 대단해요! 이렇게 복잡하고 고급스러운 기능들을 모두 마스터하셨어요. 이제 여러분은 Flutter로 거의 모든 것을 할 수 있는 진정한 개발자가 되셨어요. 앞으로도 계속해서 새로운 것을 배우고 도전하세요. 여러분의 앱이 세상을 바꿀 수 있을 거예요! 🌟