Flutter 이주의 위젯 탐방 (4) - SliverAppBar, SliverList, SliverGrid

플러터 공식 유튜브엔, 플러터에 관한 여러가지 정보들이 있다.

< 플러터 공식 유튜브  - 이주의 위젯 카테고리 >

Flutter Widget of the Week

 

이중, 이주의 위젯 카테고리에는 여러 새로운 위젯들이 있는데, 이들을 탐방해 보고자 한다!

** 정리 순서 - 간단한 설명, 사용법, 관련공식문서링크
** 볼때마다 추가 예정 (옛날것부터 정리할 예정)

 

• SliverAppBar

Custom ScrollView 에서 사용되는 특수한 형태의 Material Design 앱 바

스크롤 동작에 따라 동적으로 변화하는 UI 요소를 제공할 수 있다. 예를 들어, 스크롤을 내리면서 앱 바가 축소되거나, 스크롤을 올리면서 확장되도록 하는 동작을 수행할 수 있게 한다.

// 정의
const SliverAppBar({
  super.key,
  this.leading,
  this.automaticallyImplyLeading = true,
  this.title,
  this.actions,
  this.flexibleSpace,
  this.bottom,
  this.elevation,
  this.scrolledUnderElevation,
  this.shadowColor,
  this.surfaceTintColor,
  this.forceElevated = false,
  this.backgroundColor,
  this.foregroundColor,
  this.iconTheme,
  this.actionsIconTheme,
  this.primary = true,
  this.centerTitle,
  this.excludeHeaderSemantics = false,
  this.titleSpacing,
  this.collapsedHeight,
  this.expandedHeight,
  this.floating = false,
  this.pinned = false,
  this.snap = false,
  this.stretch = false,
  this.stretchTriggerOffset = 100.0,
  this.onStretchTrigger,
  this.shape,
  this.toolbarHeight = kToolbarHeight,
  this.leadingWidth,
  this.toolbarTextStyle,
  this.titleTextStyle,
  this.systemOverlayStyle,
  this.forceMaterialTransparency = false,
  this.clipBehavior,
}) : assert(floating || !snap, 'The "snap" argument only makes sense for floating app bars.'),
     assert(stretchTriggerOffset > 0.0),
     assert(
      collapsedHeight == null || collapsedHeight >= toolbarHeight,
      'The "collapsedHeight" argument has to be larger than or equal to [toolbarHeight].',
     ),
     _variant = _SliverAppVariant.small;

// 사용법
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: 200.0,  // 앱 바 확장 높이
      floating: false,  // 스크롤 내릴 때 앱 바가 사라지지 않도록 설정
      pinned: true,     // 앱 바가 상단에 고정되도록 설정
      flexibleSpace: FlexibleSpaceBar(
        title: Text('SliverAppBar Example'),
        background: Image.network(
          'https://flutter.dev/images/flutter-logo-sharing.png',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        List.generate(
          50,
          (index) => ListTile(title: Text('Item $index')),
        ),
      ),
    ),
  ],
)

 

SliverAppBar class - material library - Dart API

 

 

• SliverList

CustomScrollView에서 주로 사용되며, 여러 박스 위젯들을 List형태로 배치하는 Sliver 위젯

 

delegate 속성에서 SliverChildListDelegate 또는 SliverChildBuilderDelegate 를 이용하여 요소들을 제어한다.

// 정의
const SliverList({
  super.key,
  required super.delegate,
});

// 사용법
SliverList(
    delegate: SliverChildListDelegate(
        List.generate(
            50,
            (index) => ListTile(title: Text('Item $index')),
        ),
    ),
)

SliverList class - widgets library - Dart API

 

 

• SliverGrid

CustomScrollView에서 주로 사용되며, 여러 박스 위젯들을 Grid형태로 배치하는 Sliver 위젯

 

gridDelegate 속성에서 각 축의 요소들 개수를 제어할 수 있으며, SliverGridDelegateWithFixedCrossAxisCount, 또는 SliverGridDelegateWithMaxCrossAxisExtent를 이용한다.

 

delegate 속성에서 SliverChildGridDelegate 또는 SliverChildBuilderDelegate 를 이용하여 요소들을 제어한다.

 

// 정의
const SliverGrid({
  super.key,
  required super.delegate,
  required this.gridDelegate,
});

// 사용법
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 한 줄에 표시할 항목의 개수
    crossAxisSpacing: 10.0, // 항목 간 가로 간격
    mainAxisSpacing: 10.0, // 항목 간 세로 간격
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Card(
        color: Colors.blueAccent,
        child: Center(
          child: Text('Item $index', style: TextStyle(color: Colors.white)),
        ),
      );
    },
    childCount: 30, // 그리드 항목의 개수
  ),
)

SliverGrid class - widgets library - Dart API