[flutter] 플러터 스크롤바에 그림자 효과 추가하기

11 Dec 2023

flutter

그림자 효과 추가하기

플러터에서 스크롤바에 그림자 효과를 추가하려면 CustomScrollView를 사용하여 스크롤바를 커스터마이즈해야 합니다. 아래는 그림자 효과가 추가된 스크롤바를 가진 CustomScrollView의 예시입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('Shadowed Scrollbar'),
              floating: true,
              flexibleSpace: Placeholder(),
              expandedHeight: 200,
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: index.isEven ? Colors.white : Colors.grey[300],
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 CustomScrollView 위젯을 사용하여 스크롤바를 구성하고, SliverAppBar 및 SliverFixedExtentList를 사용하여 스크롤 가능한 컨텐츠를 생성합니다.

결론

플러터 앱의 스크롤바에 그림자 효과를 추가함으로써 사용자들은 스크롤 위치를 시각적으로 파악할 수 있습니다. 이를 통해 앱의 사용자 경험이 향상되고, 스크롤 가능한 컨텐츠의 시각적인 표현이 더욱 풍부해질 수 있습니다.