[flutter] 스크롤바를 사용하여 카드 뷰 구현하기

11 Dec 2023

flutter

카드 뷰 안에 많은 컨텐츠가 들어가있을 때 사용자가 편리하게 스크롤할 수 있도록 Scrollbar를 추가할 수 있습니다. Flutter에서는 Scrollbar 위젯을 사용하여 스크롤바를 구현할 수 있습니다.

기본 스크롤바 구현

다음은 스크롤바가 추가된 카드 뷰의 기본적인 구현 방법입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Card(
              child: Container(
                height: 400,  // 카드 높이 설정
                width: 300,  // 카드 너비 설정
                child: Scrollbar(
                  child: SingleChildScrollView(
                    // 카드 내용
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Scrollbar 위젯은 스크롤 가능한 카드 내용을 감싸고 있습니다. 카드 내용이 스크롤되면 스크롤바가 나타납니다.

커스텀 스크롤바 스타일링

스크롤바의 스타일을 변경하려면 PrimaryScrollController를 이용하여 Theme 데이터를 수정할 수 있습니다. 다음 코드는 기본 스크롤바의 색을 변경하는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          controller: _scrollController,  // 스크롤 컨트롤러 설정
          child: Center(
            child: Card(
              child: Container(
                height: 400,  // 카드 높이 설정
                width: 300,  // 카드 너비 설정
                child: Scrollbar(
                  controller: _scrollController,  // 스크롤 컨트롤러 설정
                  isAlwaysShown: true,  // 항상 스크롤바 표시 여부
                  thickness: 10,  // 스크롤바 두께
                  child: SingleChildScrollView(
                    // 카드 내용
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Scrollbar 위젯을 감싸는 SingleChildScrollView 위에 ScrollController를 추가하여 기본적인 스크롤바 스타일을 커스터마이징했습니다.

카드 뷰에 스크롤바를 추가하는 방법에 대해 간단히 알아보았습니다. 원하는 스타일링과 동작에 따라 Scrollbar 위젯의 속성을 조절하여 적절한 스크롤바를 구현할 수 있습니다.