플러터 2D 스크롤: 사용법과 옵션

Flutter 3.13 버전부터 도입된 2D 스크롤 기능은 사용자가 두 축 방향으로 자유롭게 콘텐츠를 스크롤할 수 있도록 하는 강력한 기능입니다.

지도 앱, 사진 앨범, 게임 등 다양한 분야에서 활용될 수 있으며, 기존 1D 스크롤 기능에 비해 보다 유연하고 자연스러운 사용자 경험을 제공합니다.

이 블로그에서는 Flutter 2D 스크롤의 기본 사용법과 다양한 옵션들을 자세히 살펴보겠습니다.

1. 기본 사용법

2D 스크롤 기능을 구현하려면 TwoDimensionalScrollable 위젯과 TwoDimensionalViewport 위젯을 사용합니다.

• TwoDimensionalScrollable 위젯은 스크롤 가능한 콘텐츠를 감싸는 역할을 합니다.
• TwoDimensionalViewport 위젯은 스크롤 가능한 창을 나타냅니다.

TwoDimensionalScrollable(
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

TwoDimensionalViewport(
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

두 위젯을 함께 사용하여 2D 스크롤 기능을 구현할 수 있으며, 다양한 제스처와 애니메이션을 추가하여 사용자 경험을 더욱 풍부하게 만들 수 있습니다.

2. 옵션

2D 스크롤 기능은 다양한 옵션을 통해 사용자 정의가 가능합니다. 주요 옵션과 예시 코드는 다음과 같습니다.

• scrollPosition: 스크롤 위치를 제어합니다. ScrollController를 사용하여 스크롤 위치를 직접 설정하거나, 사용자의 제스처에 따라 자동으로 스크롤될 수 있도록 설정할 수 있습니다.

TwoDimensionalScrollable(
  scrollPosition: _scrollController,
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

• physics: 스크롤 동작을 정의합니다. ScrollPhysics 클래스를 사용하여 스크롤 속도, 반발 효과, 제한 범위 등을 설정할 수 있습니다.

Dart

TwoDimensionalScrollable(
  physics: const BouncingScrollPhysics(),
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

• dragStartBehavior: 스크롤 시작 시 동작을 정의합니다. DragStartBehavior.downToUp은 사용자가 아래에서 위로 드래그할 때만 스크롤이 시작되도록 하고, DragStartBehavior.start는 사용자가 어느 방향으로 드래그해도 스크롤이 시작되도록 합니다.

TwoDimensionalScrollable(
  dragStartBehavior: DragStartBehavior.downToUp,
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

• padding: 스크롤 가능한 콘텐츠 주변 여백을 설정합니다.

TwoDimensionalScrollable(
  padding: const EdgeInsets.all(16.0),
  child: Column(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

• axis: 스크롤 가능한 축을 정의합니다. Axis.vertical은 세로 방향 스크롤, Axis.horizontal은 가로 방향 스크롤을 의미합니다.

TwoDimensionalScrollable(
  axis: Axis.horizontal, // 가로 방향 스크롤 설정
  child: Row(
    children: [
      // 스크롤 가능한 콘텐츠
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
);

 

3. Flutter 2D 스크롤: 가로 방향 스크롤 구현 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 2D 스크롤 가로 방향 예시'),
      ),
      body: TwoDimensionalScrollable(
        axis: Axis.horizontal, // 가로 방향 스크롤 설정
        child: Row(
          children: List.generate(100, (index) {
            return Container(
              width: 150,
              height: 100,
              margin: EdgeInsets.all(8.0),
              color: Colors.grey[(index * 10) % 255],
              child: Center(
                child: Text('Item ${index + 1}'),
              ),
            );
          }),
        ),
      ),
    );
  }
}

 

설명

• TwoDimensionalScrollable 위젯을 사용하여 가로 방향 스크롤을 설정합니다.
• axis 속성을 Axis.horizontal로 설정하면 가로 방향 스크롤이 가능하게 됩니다.
• child 속성에는 스크롤 가능한 콘텐츠를 지정합니다.
• 이 예시에서는 Row 위젯을 사용하여 가로 방향으로 배열된 여러 개의 Container 위젯을 스크롤 가능한 콘텐츠로 지정했습니다.
• 각 Container 위젯은 배경색과 텍스트를 가지고 있으며, margin 속성을 사용하여 여백을 설정했습니다.

실행 결과

 

이 코드를 실행하면 가로 방향으로 스크롤 가능한 목록이 표시됩니다.

사용자는 화면을 좌우로 스크롤하여 목록을 탐색할 수 있습니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg