SliverGrid

import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/sizes.dart';

class UserProfileScreen extends StatefulWidget {
  const UserProfileScreen({super.key});

  @override
  State<UserProfileScreen> createState() => _UserProfileScreenState();
}

class _UserProfileScreenState extends State<UserProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          pinned: true,
          stretch: true,
          backgroundColor: Colors.teal,
          collapsedHeight: 80,
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            stretchModes: const [
              StretchMode.blurBackground,
              StretchMode.zoomBackground,
              StretchMode.fadeTitle,
            ],
            background: Image.asset(
              "assets/images/placeholder.jpg",
              fit: BoxFit.cover,
            ),
            title: const Text("Hello!"),
          ),
        ),
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            childCount: 50,
            (context, index) => Container(
              color: Colors.amber[100 * (index % 9)],
              child: Align(
                alignment: Alignment.center,
                child: Text("Item $index"),
              ),
            ),
          ),
          itemExtent: 100,
        ),
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            childCount: 50,
            (context, index) => Container(
              color: Colors.blue[100 * (index % 9)],
              child: Align(
                alignment: Alignment.center,
                child: Text("Item $index"),
              ),
            ),
          ),
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 100,
            mainAxisSpacing: Sizes.size20,
            crossAxisSpacing: Sizes.size20,
            childAspectRatio: 1,
          ),
        )
      ],
    );
  }
}

이 코드는 Flutter의 CustomScrollView 위젯을 사용하여 다양한 sliver 위젯들을 포함한 사용자 프로필 화면을 만듭니다. 여기서 사용된 sliver 위젯들은 SliverAppBar, SliverFixedExtentList, 그리고 SliverGrid입니다. 이 코드를 살펴보면서 각 위젯의 동작 및 목적을 자세히 설명해보겠습니다.

1. CustomScrollView:

   • CustomScrollView는 여러 개의 sliver 위젯들을 결합하여 스크롤 가능한 영역을 만듭니다.

2. SliverAppBar:

   • 앱 바의 슬라이버 버전으로, 사용자가 스크롤할 때 앱 바의 동작을 제어할 수 있습니다.
   • pinned: true로 설정하면 SliverAppBar가 항상 화면 상단에 고정됩니다.
   • stretch: true로 설정하면 스크롤의 끝에서 사용자가 계속 스크롤하면 SliverAppBar가 확장됩니다.
   • collapsedHeight와 expandedHeight: SliverAppBar의 축소된 높이와 확장된 높이를 설정합니다.
   • flexibleSpace: SliverAppBar 내부의 확장/축소되는 공간에 위젯을 배치합니다. 여기서는 FlexibleSpaceBar가 사용되었고, 배경 이미지와 제목이 포함되어 있습니다.

3. SliverFixedExtentList:

   • 일정한 높이를 갖는 아이템들의 리스트를 만듭니다.
   • itemExtent: 각 아이템의 높이를 설정합니다.
   • delegate: 아이템들을 구성하는 데 사용됩니다. 여기서는 50개의 아이템이 생성되며, 각 아이템은 다양한 색상의 배경을 가진 컨테이너입니다.

4. SliverGrid:

   • 그리드 형식의 아이템들을 표시합니다.
   • gridDelegate: 그리드의 형태와 크기를 설정합니다. 여기서는 SliverGridDelegateWithMaxCrossAxisExtent를 사용하여 크로스 축의 최대 크기, 주 축 및 크로스 축의 간격, 그리고 아이템의 가로/세로 비율을 설정합니다.
   • delegate: 그리드의 아이템들을 구성하는 데 사용됩니다. 여기서는 50개의 아이템이 생성되며, 각 아이템은 다양한 색상의 배경을 가진 컨테이너입니다.

이 코드는 사용자 프로필 화면을 구성하기 위해 여러 sliver 위젯들을 조합하는 좋은 예입니다. 사용자는 스크롤하면서 각기 다른 스타일과 형식의 콘텐츠를 볼 수 있습니다.

Flutter 코드 스니펫의 SliverGrid 위젯은 스크롤 가능한 영역 내에서 그리드 레이아웃을 생성하는 데 사용됩니다. 이 특정 구성은 일반적으로 CustomScrollView와 같은 더 큰 스크롤 가능한 뷰의 일부입니다. SliverGrid의 주요 구성 요소를 살펴보겠습니다:

SliverGrid

• 역할: SliverGrid는 여러 박스 자식을 2차원 배열로 배치하는 슬리버입니다. CustomScrollView와 같은 스크롤 가능한 레이아웃 내에서 사용됩니다.

SliverChildBuilderDelegate

• 목적: 각 자식(또는 그리드 항목)을 요구에 따라 구축하는 빌더 함수를 제공합니다.
• childCount: 그리드 내의 자식 수를 지정합니다. 여기서는 50으로 설정되어 있어, 그리드에는 50개의 항목이 있습니다.
• 빌더 함수:
  • (context, index) => Container(...): 각 그리드 항목을 구축합니다. 현재 빌드 컨텍스트와 항목의 인덱스로 호출됩니다.
  • 이 코드에서, 각 그리드 항목은 다양한 색상을 가진 Container와 중앙에 위치한 Text 위젯을 포함합니다.

그리드 항목

• Container:
  • color: Colors.blue[100 * (index % 9)]: 각 그리드 항목의 색상을 설정합니다. 색상은 항목의 인덱스에 따라 변하며, 다양한 파란색 음영을 순환합니다.
• Align:
  • alignment: Alignment.center: 각 Container 내에 Text 위젯을 중앙에 배치합니다.
• Text:
  • "Item $index": "Item"이라는 문자열과 함께 항목의 인덱스를 표시합니다.

SliverGridDelegateWithMaxCrossAxisExtent

• 목적: 그리드의 레이아웃과 동작을 정의합니다.
• maxCrossAxisExtent: 교차 축 방향에서 각 그리드 항목의 최대 크기입니다. 여기서는 100픽셀입니다.
• mainAxisSpacing 및 crossAxisSpacing: 주 축 및 교차 축을 따라 항목 간의 간격입니다. 둘 다 Sizes.size20로 설정되어 있습니다.
• childAspectRatio: 각 항목의 종횡비입니다. 1의 값은 항목이 정사각형 모양임을 의미합니다.

사용

• SliverGrid는 스크롤 가능한 뷰 내에서 항목 컬렉션을 그리드 레이아웃으로 표시하는 데 유용합니다.
• 이 위젯은 사진, 아이콘 또는 제품 타일과 같이 시각적으로 균일한 요소를 표시하는 데 특히 효과적입니다.

요약

요약하자면, 이 SliverGrid 위젯은 50개의 균일한 크기와 간격을 가진 항목으로 스크롤 가능한 그리드 레이아웃을 생성합니다. 각 항목은 색상이 있는 컨테이너와 텍스트 라벨을 포함하며, 고정된 교차 축 범위와 지정된 간격을 가진 그리드로 일관된 조직적인 시각적 구조를 제공합니다.