[flutter] 플러터 커퍼티노 스테퍼를 이용한 사진 갤러리 스크롤 속도 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 구글이 개발한 UI 프레임워크로, 다양한 플랫폼에서 동일한 코드로 앱을 개발할 수 있는 장점을 가지고 있습니다. 이번에는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 사용하여 사진 갤러리의 스크롤 속도를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치하기

먼저, 플러터 프로젝트에 cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음을 추가해주세요.

cupertino_icons: ^1.0.2

패키지 추가 후, 터미널에서 다음 명령을 실행하여 패키지를 설치해주세요.

flutter pub get

2. 스크롤 뷰와 스테퍼 위젯 구성하기

사진 갤러리 화면을 스크롤할 수 있는 스크롤 뷰(ScrollView) 위젯과 스테퍼(Stepper) 위젯을 함께 사용하여 스크롤 속도를 조절할 수 있도록 구성합니다.

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

class GalleryScreen extends StatefulWidget {
  @override
  _GalleryScreenState createState() => _GalleryScreenState();
}

class _GalleryScreenState extends State<GalleryScreen> {
  double _scrollSpeed = 1.0; // 스크롤 속도 기본값

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사진 갤러리'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 사진 갤러리 이미지들을 표시하는 부분
            // ...

            CupertinoStepper(
              initialValue: _scrollSpeed,
              min: 0.5,
              max: 2.0,
              stepValue: 0.1,
              onChanged: (value) {
                setState(() {
                  _scrollSpeed = value;
                });
              },
              // 스테퍼의 외형 설정
              // ...
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _scrollSpeed 변수는 스크롤 속도를 저장하는 변수입니다. 스테퍼 위젯에서 값을 변경할 때마다 해당 변수의 값이 업데이트되며, 이를 통해 스크롤 속도가 조절됩니다.

3. 스크롤 속도에 따른 화면 스크롤 조절하기

이제 사진 갤러리의 스크롤 속도를 _scrollSpeed 변수를 이용하여 조절할 수 있는 기능을 구현해보겠습니다. 이를 위해 스크롤 뷰(ScrollView)의 scrollPhysics 속성을 설정해야 합니다.

body: SingleChildScrollView(
  physics: ClampingScrollPhysics(
    // ScrollSpeedPhysics를 사용하여 스크롤 속도 조절
    parent: ScrollSpeedPhysics(speed: _scrollSpeed),
  ),
  child: Column(
    children: <Widget>[
      // 사진 갤러리 이미지들을 표시하는 부분
      // ...
    ],
  ),
),

위 코드에서 ClampingScrollPhysics는 기본적인 스크롤 동작을 제공하는 물리학적 시뮬레이션 클래스입니다. ScrollSpeedPhysics는 스크롤 속도를 조절하기 위해 작성한 사용자 정의 물리학적 시뮬레이션 클래스입니다.

class ScrollSpeedPhysics extends ClampingScrollPhysics {
  final double speed;

  const ScrollSpeedPhysics({this.speed, ScrollPhysics parent})
      : super(parent: parent);

  @override
  double applyPhysicsToUserOffset(ScrollMetrics position, double offset) {
    return super.applyPhysicsToUserOffset(position, offset * speed);
  }
}

위의 ScrollSpeedPhysics 클래스는 ClampingScrollPhysics 클래스를 상속받아서 applyPhysicsToUserOffset 메서드를 오버라이드하여 스크롤 속도를 조절하고 있습니다. offset * speed를 반환함으로써 사용자의 스크롤 동작에 대한 오프셋을 조절하게 됩니다. _scrollSpeed 변수의 값에 따라 동작 속도가 조절됩니다.

이제 스크롤 속도를 조절할 수 있는 커퍼티노 스테퍼를 통해 사진 갤러리의 스크롤 속도를 조절할 수 있습니다. 적절한 값을 선택하여 사진 갤러리의 스크롤 속도를 최적화해보세요.