Flutter CustomScrollView

Flutter CustomScrollView (커스텀스크롤뷰)

`CustomScrollView`는 Flutter에서 스크롤 가능한 여러 위젯들을 커스터마이징하여 배치할 수 있는 위젯입니다. `CustomScrollView`는 다양한 스크롤 효과와 레이아웃을 만들 수 있게 해줍니다. 보통 `Sliver` 위젯들과 함께 사용되며, `ListView`, `GridView`와 같은 일반적인 스크롤 위젯들보다 더 유연한 레이아웃을 만들 수 있습니다.

▶ 주요 개념 및 구성 요소

1. Slivers:
   – `CustomScrollView`는 `Sliver` 위젯들의 리스트를 포함합니다.
   – `Sliver`는 스크롤 가능한 영역을 의미하며, 각기 다른 종류의 스크롤 가능한 영역을 정의할 수 있습니다.
   – 예를 들어, `SliverList`, `SliverGrid`, `SliverAppBar`, `SliverPadding` 등이 있습니다.

2. ScrollController:
   – 스크롤의 위치를 제어하고, 위치 변화를 감지할 수 있는 컨트롤러입니다.
   – `CustomScrollView`에 `ScrollController`를 전달하여 스크롤 위치를 조작하거나 감시할 수 있습니다.

▶ 주요 Sliver 위젯들

– SliverAppBar:
  – 스크롤할 때 축소되는 앱바를 만들 수 있습니다. 스크롤 시에 헤더 부분이 자연스럽게 작아지거나 사라지도록 할 수 있습니다.

– SliverList:
  – 스크롤 가능한 리스트를 만들 수 있습니다. 리스트 항목들은 동적으로 생성될 수 있으며, 필요할 때만 렌더링됩니다.

– SliverGrid:
  – 그리드 형태로 스크롤 가능한 레이아웃을 만들 수 있습니다.

– SliverToBoxAdapter:
  – Sliver가 아닌 일반적인 박스 위젯들을 Sliver 컨텍스트에서 사용할 수 있게 합니다.

▶ 예제 코드

아래는 `CustomScrollView`와 몇 가지 기본적인 `Sliver` 위젯들을 사용하는 예제입니다.

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(
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar'),
                background: Image.network(
                  'https://example.com/image.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              floating: true,
              snap: true,
              pinned: true,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item #$index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverGrid(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: index.isOdd ? Colors.amber : Colors.blue,
                    height: 150.0,
                  );
                },
                childCount: 20,
              ),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 2.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ 주요 특징
– 확장 가능한 AppBar: `SliverAppBar`를 통해 스크롤 시 확장되고 축소되는 앱바를 만들 수 있습니다.
– 동적 리스트: `SliverList`와 `SliverChildBuilderDelegate`를 통해 스크롤 시에만 항목을 렌더링하여 성능을 최적화할 수 있습니다.
– 그리드 레이아웃: `SliverGrid`를 사용하여 다양한 그리드 레이아웃을 구현할 수 있습니다.

`CustomScrollView`는 복잡한 스크롤 가능한 레이아웃을 만들 때 매우 유용하며, 다양한 `Sliver` 위젯들을 조합하여 유연한 UI를 구현할 수 있습니다.

Post Views: 195

Leave a Reply Cancel reply