CustomScrollView
CustomScrollView는 플러터에서 스크롤 가능한 커스텀 레이아웃을 만들기 위한 위젯이다. CustomScrollView를 사용하면 다양한 Sliver위젯과 조합하여 독특하고 복잡한 스크롤 레이아웃을 구축할 수 있다.
간단한 목록을 표시하기 위해서는 ListView를 사용해도 되겠지만 , 고급 스크롤 레이아웃을 구축할 때는 CustomScrollView위젯을 사용하는것이 유용하다. 여러 스크롤 영역을 조합하거나, 헤더와 푸터를 추가하거나, 스크롤과 함께 효과적으로 상호 작용하는 요소를 만들 때 사용된다. CustomScrollView에서는 children,chid 대신slivers,sliver를 사용한다. 우선 Sliver에 대해 알아보겠다.
Sliver
Sliver 위젯은 CustomScrollView위젯의 핵심으로 , 스크롤 가능한 요소를 나타내며, 스크롤에 따라 동적으로 조절된다.SliverAppBar, SliverList, SliverGrid, SliverToBoxAdapter 등 다양한 Sliver 위젯을 사용하여 스크롤 레이아웃을 구성할 수 있다.
우선 CustomScrollView 소스 코드를 보겠다.
import 'package:flutter/material.dart';
import 'package:flutter_practice/src/default_layout_widget.dart';
class CustomScrollViewScreen extends StatelessWidget {
const CustomScrollViewScreen({super.key});
@override
Widget build(BuildContext context) {
return DefaultLayoutWidget(
child: CustomScrollView(
slivers: [
],
),
);
}
}
slivers안에 위젯들을 배치하면 된다. slivers란 하나의 스크롤링을 의미하는것으로 slivers안에 배치된 위젯들은 스크롤이 가능하다. slivers 안에서는 일반 위젯의 사용이 불가능하다. 그렇기 때문에 Sliver관련 위젯만 사용가능하다. Sliver관련 위젯에 대해 알아 보겠다.
Sliver 위젯 종류
SliverAppBar
우선 slivers 안에서 AppBar를 구현하겠다. pinnded를 사용하게되면 스크롤이 되어도 AppBar를 고정할수 있다.
SliverAppBar(
pinned: true, // 헤더를 스크롤 가능한 화면 상단에 고정
// floating: true, 스크롤시 AppBar가 화면에 나타난다.
title: Text('Sliver App Bar'),
backgroundColor: Colors.green,
expandedHeight: 200,
leading: Icon(Icons.arrow_back),
actions: [Icon(Icons.settings)],
)
Sliver List
다음은 slivers 안에서 리스트를 구현하는 방법이다.
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('$index')),
childCount: 20),
),
Sliver Grid
다음은 slivers 안에서 그리드를 구현하는 방법이다.
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, // 열 수
mainAxisSpacing: 10.0, // 주 축 간격
crossAxisSpacing: 10.0, // 교차 축 간격
childAspectRatio: 1.0, // 각 그리드 아이템의 가로 세로 비율
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.blueAccent,
alignment: Alignment.center,
child: Text(
'아이템 $index',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
);
},
childCount: 20, // 그리드 아이템 개수
),
),
SliverToBoxAdapter
다음은 slivers 안에서 일반적인 위젯들을 구현햐고 싶다면 SliverToBoxAdapter로 감싸주어야한다. padding또한 SliverPadding이라는 위젯을 사용해야한다.
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
sliver: SliverToBoxAdapter(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {},
child: Text('이전'),
),
ElevatedButton(
onPressed: () {},
child: Text('다음'),
),
],
),
),
)
코드
위젯들을 사용하여 아이템 리스트 추가가 가능한 CustomScrollView 위젯을 구성하겠다.
import 'package:flutter/material.dart';
class CustomScrollViewScreen extends StatefulWidget {
const CustomScrollViewScreen({Key? key}) : super(key: key);
@override
_CustomScrollViewScreenState createState() => _CustomScrollViewScreenState();
}
class _CustomScrollViewScreenState extends State<CustomScrollViewScreen> {
List<int> items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 초기 아이템 목록
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
backgroundColor: Colors.amber,
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('App Bar'),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
// 스크롤 가능한 목록 아이템 생성
return ListTile(
title: Text('아이템 $index'),
);
},
childCount: items.length, // 목록 아이템 개수
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.amber,
onPressed: () {
setState(() {
items.add(items.length + 1); // 목록에 새로운 아이템을 추가
});
},
child: Icon(Icons.add),
),
);
}
}
참고
