[flutter] Swipeable Widget을 사용하여 화면 확대 및 축소 기능 구현 방법

08 Dec 2023

flutter

모바일 앱을 개발하다보면 사용자가 화면을 확대하거나 축소할 수 있는 기능이 필요한 경우가 있습니다. Flutter에서는 Swipeable Widget을 사용하여 이러한 기능을 구현할 수 있습니다. Swipeable Widget은 사용자가 화면을 스와이프하여 확대 또는 축소할 수 있는 기능을 제공합니다.

Swipeable Widget은 사용자가 제스처(터치, 스와이프 등)를 사용하여 상호작용할 수 있는 위젯입니다. 이를 활용하면 사용자가 화면을 스와이프하여 이미지나 컨텐츠를 확대하거나 축소할 수 있는 기능을 구현할 수 있습니다.

다음은 Swipeable Widget을 사용하여 화면을 확대하거나 축소하는 간단한 예제 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Swipeable Widget 예제')),
        body: Center(
          child: SwipeActionCell(
            key: ObjectKey('1'),
            child: Container(
              color: Colors.lightBlue,
              child: Center(
                child: Text('Swipe 하세요'),
              ),
            ),
            performsFirstActionWithFullSwipe: true,
            trailingActions: <SwipeAction>[
              SwipeAction(
                title: '확대',
                onTap: (CompletionHandler handler) async {
                  // 확대 기능 구현
                  handler(true);
                },
                backgroundColor: Colors.green,
              ),
              SwipeAction(
                title: '축소',
                onTap: (CompletionHandler handler) async {
                  // 축소 기능 구현
                  handler(true);
                },
                backgroundColor: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드는 Flutter의 flutter_swipe_action_cell 패키지를 사용하여 Swipeable Widget을 구현한 것입니다. 화면의 중앙에는 Swipeable Widget이 위치하고 있으며, 사용자가 해당 위젯을 오른쪽으로 스와이프하면 확대/축소 기능을 수행할 수 있습니다.

결론

Flutter에서는 Swipeable Widget을 사용하여 사용자가 화면을 스와이프하여 확대 또는 축소하는 기능을 구현할 수 있습니다. 이를 통해 모바일 앱의 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

Swipeable Widget이란?

Swipeable Widget을 사용하여 화면 확대 및 축소 기능 구현하기

결론