[Flutter] swipe 기능 구현하기

1. 이미지 추가하기

Flutter 프로젝트에서 이미지를 사용하기 위해서는 이미지의 경로를 pubspec.yaml 파일에 추가해줘야한다. 하지만 프로젝트를 처음 생성하면 이미지 폴더가 따로 없는데 프로젝트 하위 경로에 asset/img 폴더를 추가해서 사용하면 된다.

추가한 img 폴더의 경로를 pubspec.yaml 파일에 추가해주면 된다. 해당 파일을 열어보면 많은 코드가 있지만 처음 프로젝트를 생성한 상태라면 54번째 라인 혹은 그 주변 라인에 ‘flutter:’가 있을텐데 그 아래에 새로 추가한 img 폴더의 경로를 추가한다.

// pubspec.yaml - 54 line
flutter:
    # The following line ensures that the Material Icons font is
    # included with your application, so that you can use the icons in
    # the material Icons class.
    uses-material-design: true

    //여기에 img 폴더 추가
    assets:
        //아래와 같이 선언하면 img 폴더에 있는 이미지를 전체 사용한다.
        - asset/img/

pubspec.yaml 파일에 코드를 추가할 때 주의할 점이 있는데, 코드 앞의 공백을 신경써서 작성해야한다는 것이다. 예를 들어 새로 추가한 assets이 flutter와 같은 선상에 있다면 assets은 flutter 하위 경로에 포함되지 않는다. 따라서 하위 경로에 포함시키고 싶다면 공백을 주어야 한다.

2. 화면에 이미지 불러오기

stful을 입력하면 StatefulWidget을 바로 생성할 수 있는데, .dart 파일을 하나 생성해서 StatefulWidget을 생성하고 이름을 지정한다.

Flutter에서 여러 페이지를 한 화면에서 볼 수 있게 해주는 PageView 위젯을 사용하면 Swipe처럼 화면 구현이 가능하다. 화면을 수직이나 수평으로 넘기거나 페이지를 전환할 때 다양한 애니메이션 효과를 적용할 수 있다.

class SwipePage extends StatefulWidget {
  const SwipePage({super.key});

  @override
  State<SwipePage> createState() => _SwipePage();
}

class _SwipePage extends State<SwipePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
        children: [1, 2, 3, 4, 5].map(
            (e) => Image.asset(
                'asset/img/image_$e.jpeg',
                fit: BoxFit.cover,    //화면에 이미지 꽉 채우는 옵션
            ),
        ).toList(),

      //단순 이미지 추가하는 방법
      // children: [
      //   Image.asset('asset/img/image_1.jpeg', fit: BoxFit.cover),
      //   Image.asset('asset/img/image_2.jpeg'),
      //   Image.asset('asset/img/image_3.jpeg'),
      //   Image.asset('asset/img/image_4.jpeg'),
      //   Image.asset('asset/img/image_5.jpeg'),
      // ],
    ));
  }
}

img 폴더에 추가한 이미지 파일의 이름을 image_1로 설정해서 image_5까지 총 5개의 이미지를 추가하고 위의 코드를 실행하면 화면에 이미지가 나타나고 좌우 스크롤을 통해 총 5장의 이미지가 나타나는 화면을 볼 수 있다.

3. Swipe 기능 구현하기

총 5장의 이미지를 추가했는데, 직접 스크롤을 하는게 아닌 자동으로 페이지가 넘어가도록 구현해보자. 자동으로 넘어가는 기능은 PageController를 생성해서 PageView에 연결해야 한다. PageController는 PageView가 보여줄 첫 페이지를 설정하고 페이지 전환을 트리거 할 수 있다.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class SwipePage extends StatefulWidget {
  const SwipePage({super.key});

  @override
  State<SwipePage> createState() => _SwipePage();
}

class _SwipePage extends State<SwipePage> {
  Timer? timer;

  //PageController 생성
  PageController controller = PageController(
    //첫 페이지 설정
    initialPage: 0,
  );

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

    //일정 주기마다 화면을 넘길 타이머 생성
    timer = Timer.periodic(Duration(seconds: 4), (timer) {
      int currentPage = controller.page!.toInt();
      int nextPage = currentPage + 1;

      //마지막화면이 되면 페이지 순서 초기화
      if (nextPage > 4) {
        nextPage = 0;
      }

      //화면을 넘길때 필요한 애니매이션 설정
      controller.animateToPage(
        nextPage,
        duration: Duration(milliseconds: 400),  //실행시간
        curve: Curves.linear,                   //효과
      );
    });
  }

  @override
  void dispose() {
    //State가 사라지면 타이머 중지
    controller.dispose();
    if (timer != null) {
      timer!.cancel();
    }

    //dispose()가 실행되면 종료되기 때문에 위쪽에 코드 작성
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //상태바 (시계 등) 색상 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return Scaffold(
        body: PageView(
      controller: controller,       //생성한 controller 설정
      children: [1, 2, 3, 4, 5]
          .map(
            (e) => Image.asset(
              'asset/img/image_$e.jpeg',
              fit: BoxFit.cover,
            ),
          ).toList(),
    ));
  }
}

전체적인 코드를 작성하면 위와 같다. 전체적으로 간단히 요약하면 PageController를 생성해서 PageView에 설정하고, 화면을 일정 주기마다 넘길 타이머를 만들어서 애니매이션 효과를 주어 페이지를 완성할 수 있다.