[flutter] 스크롤바의 높이를 동적으로 조절하는 방법

11 Dec 2023

flutter

스크롤바는 사용자가 컨텐츠를 스크롤할 수 있게 해주는 중요한 요소입니다. 때때로 스크롤바의 높이를 동적으로 조절해야 할 때가 있습니다. 이때 Flutter에서는 어떻게 스크롤바의 높이를 동적으로 조절할 수 있을까요? 이에 대한 방법을 알아보겠습니다.

1. CustomScrollbar 사용하기

Flutter에서는 CustomScrollbar 위젯을 사용하여 커스텀 스크롤바를 만들 수 있습니다. 이를 활용하여 스크롤바의 높이를 동적으로 조절할 수 있습니다. 아래는 CustomScrollbar를 사용하여 스크롤바의 높이를 동적으로 조절하는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollbar(
          child: SingleChildScrollView(
            child: Container(
              height: 1000, // 가변적인 높이 설정
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

2. 컨텐츠 높이에 따라 스크롤바 조절하기

컨텐츠의 높이에 따라 스크롤바의 높이를 동적으로 조절하는 방법도 있습니다. 이를 위해서는 Scrollbar 위젯을 사용하여 컨텐츠의 높이를 계산하여 스크롤바의 높이를 동적으로 조절할 수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Scrollbar(
          isAlwaysShown: true,
          thickness: 10, // 스크롤바 두께
          child: SingleChildScrollView(
            child: Container(
              height: 1000, // 가변적인 높이 설정
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

결론

Flutter에서는 CustomScrollbar나 Scrollbar 위젯을 사용하여 스크롤바의 높이를 동적으로 조절할 수 있습니다. 이를 통해 컨텐츠의 크기에 따라 적절한 스크롤바를 제공할 수 있습니다.

참고 문헌:

https://api.flutter.dev/flutter/material/Scrollbar-class.html
https://api.flutter.dev/flutter/material/CustomScrollbar-class.html