Overview.
List 를 커스텀 해보자
음... 사실 여기는 좀 모르겠다 나중에 계속 알아봐야지
- CustomScrollView 란?
- 주의점
0. 문서
https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html
CustomScrollView class - widgets library - Dart API
A ScrollView that creates custom scroll effects using slivers. A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers. For example, to create a scroll view that contains an expan
api.flutter.dev
https://api.flutter.dev/flutter/material/SliverAppBar-class.html
SliverAppBar class - material library - Dart API
A Material Design app bar that integrates with a CustomScrollView. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are opti
api.flutter.dev
1. CustomScrollView 란?
슬라이버를 사용하여 사용자 정의 스크롤 효과를 만드는 ScrollView 입니다 .
CustomScrollView 를 사용하면 슬라이버를 직접 제공하여 목록, 그리드 및 확장 헤더와 같은 다양한 스크롤 효과를 만들 수 있습니다. 예를 들어 확장 앱 바, 목록 및 그리드가 포함된 스크롤 뷰를 만들려면 SliverAppBar , SliverList 및 SliverGrid 세 개의 슬라이버 목록을 사용하세요 .
이러한 슬라이버 의 위젯 은 RenderSliver 개체를 생성해야 합니다 .
와 같이 Sliver 를 이용하여 List 를 구현하는 것이다.
우리는 SliverAppBar 와 SliverList 를 사용해보자 SliverGrid 는 나중에 써봐야지
먼저 CustomScrollView 위젯을 생성한 후 silvers [] 배열을 주면 된다.
2. SliverAppBar , SliverList
SliverAppBar 는 뭐 그냥 앱바다 ㅋㅋ.. 나는 expadedHeight 와 collapseHeight 를 사용해본다.
SliverList 를 어떤 리스트를 뿌릴지 정할 수 있다. 생성자 매개변수중 builder 는 필수값이다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _Home(),
);
}
}
class _Home extends StatelessWidget {
const _Home({super.key});
@override
Widget build(BuildContext context) {
// 앱 바의 높이
// collapseHeight 최소값은 56.0 보다는 커야함
// const double kToolbarHeight = 56.0;
var height = AppBar().preferredSize.height;
print("앱바의 높이 : $height");
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text("제목"),
expandedHeight: 300, // appbar 의 높이가 늘어남
collapsedHeight: 100, // toolbarHeight 56.0 보다 커야함
),
SliverList(
delegate: SliverChildBuilderDelegate(
// 자식 수를 지정
childCount: 100,
// IndexedWidgetBuilder
(context, index) => Text("dsadsad"),
),
),
],
),
),
);
}
}
2. 주의점
위의 AppBar 부분을 보면 제목이 내려오다가 끊기는 것을 확인할 수 있다. 이는 collapseHeight 로 appbar가 더이상 내려오지 않을 지점을 정할 수 있다.
collapseHeight 는 최소값인 56.0 보다는 커야되며 [하드코딩 되어있더라구요] , 높은 값을 가질 수록 내려오는 공간이 작아진다.
expandedHeight 는 AppBar의 높이를 지정할 수 있다.
SliverList 에서는 delegate 를 필수로 지정해야하며 이에 SliverChildBuilderDelegate 위젯을 사용하여 리스트를 뿌린다.
SliverChildBuilderDeleagate 도 마찬가지로 생성자에 builder 를 필수로 넣어 주어야 하며 (context , index)를 [뭐라하더라 가져오는거] 가져올 수 있다. childCount 로 자식 카운트를 지정할 수 있다.
이 외에도 여러가지 있으니 문서를 참조하자
'flutter & dart' 카테고리의 다른 글
flutter & dart - Divider 와 Spacer (0) | 2024.04.01 |
---|---|
flutter & dart - Dismissible ( 스와이프 위젯 ) (0) | 2024.04.01 |
flutter & dart - SingleChildScrollView (0) | 2024.04.01 |
flutter & dart - BoxConstraints (0) | 2024.04.01 |
flutter & dart - CircularProgressIndicator (0) | 2024.04.01 |