Flutter Sliver - 온더테크

Contents

Flutter의 Sliver는 스크롤 가능한 영역을 구성하는 데 사용되는 특별한 유형의 위젯입니다. Sliver 위젯은 슬라이딩 리스트나 그리드와 같은 스크롤 가능한 콘텐츠를 효율적으로 표시하는 데 도움을 줍니다. Sliver를 사용하면 스크롤 동작을 커스터마이즈하고 고급 레이아웃을 구현할 수 있습니다.

주요 Sliver 위젯

SliverAppBar
SliverList
SliverGrid
SliverFixedExtentList
SliverToBoxAdapter

SliverAppBar

SliverAppBar는 스크롤 가능한 앱 바를 만드는 데 사용됩니다. 앱 바는 스크롤 동작에 따라 축소되거나 확장될 수 있습니다.

예제

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: [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar Example'),
                background: Image.network(
                  'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-6b5a114023aa7f1bc7a5b2c5fb648a9940178e7db0980a8b9bb0b566c1742b95.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item #$index'),
                ),
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

SliverList

SliverList는 스크롤 가능한 리스트를 만드는 데 사용됩니다. SliverChildBuilderDelegate를 사용하여 동적으로 리스트 아이템을 생성할 수 있습니다.

예제

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(
      title: Text('Item #$index'),
    ),
    childCount: 50,
  ),
)

SliverGrid

SliverGrid는 스크롤 가능한 그리드를 만드는 데 사용됩니다. 그리드의 레이아웃을 정의하기 위해 SliverGridDelegate를 사용합니다.

예제

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(
      color: Colors.teal[100 * (index % 9)],
      child: Center(
        child: Text('Grid Item #$index'),
      ),
    ),
    childCount: 20,
  ),
)

SliverFixedExtentList

SliverFixedExtentList는 고정된 높이의 아이템을 갖는 리스트를 만드는 데 사용됩니다. 이는 스크롤 성능을 최적화할 수 있습니다.

예제

SliverFixedExtentList(
  itemExtent: 50.0,
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(
      title: Text('Fixed Item #$index'),
    ),
    childCount: 20,
  ),
)

SliverToBoxAdapter

SliverToBoxAdapter는 단일 박스 위젯을 Sliver로 변환하는 데 사용됩니다. 이 위젯을 사용하면 Sliver와 비슷한 방식으로 일반 위젯을 추가할 수 있습니다.

예제

SliverToBoxAdapter(
  child: Container(
    height: 100.0,
    color: Colors.amber,
    child: Center(
      child: Text('Single Box'),
    ),
  ),
)

CustomScrollView

CustomScrollView는 여러 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: [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Sliver Example'),
                background: Image.network(
                  'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-6b5a114023aa7f1bc7a5b2c5fb648a9940178e7db0980a8b9bb0b566c1742b95.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 150,
                color: Colors.pink,
                child: Center(child: Text('SliverToBoxAdapter')),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item #$index'),
                ),
                childCount: 10,
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  color: Colors.teal[100 * (index % 9)],
                  child: Center(
                    child: Text('Grid Item #$index'),
                  ),
                ),
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

결론

Flutter의 Sliver 위젯을 사용하면 복잡하고 효율적인 스크롤 가능한 레이아웃을 쉽게 구현할 수 있습니다. SliverAppBar, SliverList, SliverGrid 등을 활용하여 다양한 형태의 스크롤 뷰를 만들 수 있으며, CustomScrollView를 통해 이들을 조합하여 고도로 커스터마이즈된 UI를 구축할 수 있습니다. Sliver 위젯을 이해하고 활용하면 Flutter 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다.

Post Views: 202