[flutter] 플러터에서 리퀴드 스와이프 구현하기

18 Dec 2023

flutter

플러터를 사용하여 모바일 앱을 개발하는 중, 사용자가 화면을 스와이프하여 다양한 기능을 수행할 수 있는 리퀴드 스와이프 기능을 구현하고 싶을 때가 있습니다. 이번 블로그에서는 플러터에서 리퀴드 스와이프를 구현하는 방법을 알아보겠습니다.

1. 들어가며

리퀴드 스와이프란 사용자가 손가락으로 화면을 스와이프하면 해당 동작에 따라 화면 전환이나 기능 수행이 이루어지는 기능을 말합니다. 플러터에서는 이를 구현하기 위해 Dismissible 위젯을 사용할 수 있습니다.

2. Dismissible 위젯

Dismissible 위젯은 사용자가 화면을 스와이프하여 항목을 제거하거나 다양한 동작을 수행할 수 있도록 지원하는 위젯입니다. 이를 이용하여 리퀴드 스와이프를 간편하게 구현할 수 있습니다.

다음은 Dismissible 위젯으로 리퀴드 스와이프를 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('리퀴드 스와이프 구현'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Dismissible(
              key: Key('item $index'),
              onDismissed: (direction) {
                // 사용자가 스와이프했을 때 실행할 작업 수행
              },
              background: Container(
                color: Colors.red,
              ),
              child: ListTile(title: Text('항목 $index')),
            );
          },
        ),
      ),
    );
  }
}

위 코드에서 Dismissible 위젯을 사용하여 항목을 스와이프할 때의 동작을 정의할 수 있습니다. onDismissed 콜백을 통해 사용자가 스와이프 했을 때의 작업을 정의하고, background 속성을 통해 스와이프할 때 보여질 배경을 설정할 수 있습니다.

3. 마무리

이렇게 플러터에서는 Dismissible 위젯을 사용하여 간단하게 리퀴드 스와이프를 구현할 수 있습니다. 이를 응용하여 다양한 사용자 경험을 제공하는 앱을 개발할 수 있으니 참고하시기 바랍니다.

더 많은 정보는 공식 플러터 문서를 참고하시기 바랍니다.