[flutter] AspectRatio를 사용하여 확대/축소 기능 구현하기

21 Dec 2023

flutter

안녕하세요! Flutter에서 이미지나 비디오 등을 화면에 표시할 때 확대/축소 기능을 구현하고 싶으신가요? AspectRatio 위젯을 사용하여 이 기능을 간단하게 구현할 수 있습니다.

AspectRatio란 무엇인가요?

AspectRatio 위젯은 해당 자식 위젯의 가로 세로 비율을 유지하면서 부모 위젯의 공간을 차지하도록 하는 위젯입니다. 이를 활용하여 이미지나 비디오의 확대/축소 기능을 쉽게 구현할 수 있습니다.

확대/축소 기능 구현하기

다음은 AspectRatio를 사용하여 간단한 확대/축소 기능을 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

class ZoomableImage extends StatefulWidget {
  @override
  _ZoomableImageState createState() => _ZoomableImageState();
}

class _ZoomableImageState extends State<ZoomableImage> {
  double _scale = 1.0;
  double _previousScale = 1.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleStart: (ScaleStartDetails details) {
        _previousScale = _scale;
      },
      onScaleUpdate: (ScaleUpdateDetails details) {
        setState(() {
          _scale = _previousScale * details.scale;
        });
      },
      child: Center(
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Image.network('https://example.com/image.jpg'),
        ),
      ),
    );
  }
}

위 예제 코드에서 ZoomableImage 위젯은 GestureDetector를 사용하여 확대/축소 제스처를 감지하고, _scale 변수를 사용하여 확대/축소 비율을 조절합니다. 이때 AspectRatio를 이용하여 이미지를 표시하므로 이미지의 가로 세로 비율이 유지됩니다.

이제 위젯을 화면에 추가하고 테스트해보세요!

마무리

이렇게 AspectRatio를 활용하여 확대/축소 기능을 구현할 수 있습니다. 이 방법을 응용하여 원하는 대상물에 확대/축소 기능을 적용해 보세요. 혹시 도움이 필요하거나 궁금한 점이 있으시다면 언제든지 물어보세요!

참고: https://api.flutter.dev/flutter/widgets/AspectRatio-class.html