[flutter] Swipeable Widget을 사용하여 화면 사이즈 조절 기능 구현하기

08 Dec 2023

flutter

먼저, Swipeable Widget을 사용하기 위해서는 소스코드에 해당 위젯을 추가해야 합니다.

import 'package:swipeable/swipeable.dart';

위와 같이 패키지를 import한 뒤에 아래와 같이 Swipeable을 추가할 수 있습니다.

Swipeable(
  onSwipeLeft: () {
    // 왼쪽으로 스와이프했을 때 수행할 동작
  },
  onSwipeRight: () {
    // 오른쪽으로 스와이프했을 때 수행할 동작
  },
  child: Container(
    // Swipeable 기능을 적용할 화면 요소
  ),
)

2. 화면 사이즈 조절 기능 구현

Swipeable Widget을 사용하여 화면 사이즈를 조절하는 방법은 간단합니다. 먼저, 화면의 상태를 관리하기 위해 StatefulWidget을 사용하여 상태를 저장하고 변경할 수 있도록 구성합니다. 그리고 Swipeable Widget의 onSwipeLeft과 onSwipeRight 콜백 함수에서 화면의 상태를 변경하여 화면 크기를 조절할 수 있습니다.

아래는 간단한 예시 코드입니다.

class ResizableScreen extends StatefulWidget {
  @override
  _ResizableScreenState createState() => _ResizableScreenState();
}

class _ResizableScreenState extends State<ResizableScreen> {
  double _screenWidth = 300;

  @override
  Widget build(BuildContext context) {
    return Swipeable(
      onSwipeLeft: () {
        setState(() {
          _screenWidth -= 50; // 왼쪽으로 스와이프할 때 화면 너비 감소
        });
      },
      onSwipeRight: () {
        setState(() {
          _screenWidth += 50; // 오른쪽으로 스와이프할 때 화면 너비 증가
        });
      },
      child: Container(
        width: _screenWidth,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위 코드에서는 Swipeable Widget을 사용하여 좌우 스와이프로 화면의 너비를 조절하는 예시를 보여주고 있습니다.

마치며

이렇게하여 Swipeable Widget을 활용하여 화면 사이즈를 조절하는 기능을 구현할 수 있습니다. Swipeable을 이용하면 다양한 사용자 상호작용을 통한 화면 조작이 가능하며, 화면 크기 조절뿐만 아니라 여러 가지 동작을 추가로 구현할 수 있습니다.

1. Swipeable Widget 기본 설정

2. 화면 사이즈 조절 기능 구현

마치며