TabBarview에서의 collection for

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

final tabs = [
  "Top",
  "Users",
  "Videos",
  "Sounds",
  "LIVE",
  "Shopping",
  "Brands",
];

class DiscoverScreen extends StatelessWidget {
  const DiscoverScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          elevation: 1,
          title: const Text('Discover'),
          bottom: TabBar(
            splashFactory: NoSplash.splashFactory,
            padding: const EdgeInsets.symmetric(
              horizontal: Sizes.size16,
            ),
            isScrollable: true,
            labelStyle: const TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: Sizes.size16,
            ),
            indicatorColor: Colors.black,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.grey.shade500,
            tabs: [
              for (var tab in tabs)
                Tab(
                  text: tab,
                ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            for (var tab in tabs)
              Center(
                child: Text(
                  tab,
                  style: const TextStyle(
                    fontSize: 28,
                  ),
                ),
              )
          ],
        ),
      ),
    );
  }
}

이 코드는 Flutter에서 DefaultTabController, TabBar, 그리고 TabBarView 위젯을 사용하여 탭 인터페이스를 구현하는 방법을 보여줍니다. DiscoverScreen이라는 StatelessWidget을 통해 구현되며, 사용자가 다양한 카테고리를 탐색할 수 있는 탭 인터페이스를 제공합니다.

로직 설명:

1. DefaultTabController:

   • DefaultTabController는 탭을 관리하는데 사용되는 위젯입니다. length 속성을 통해 탭의 총 개수를 지정합니다. 여기서는 tabs 리스트의 길이만큼 탭을 생성합니다.

2. AppBar와 TabBar:

   • AppBar는 화면 상단의 앱 바를 나타냅니다. title에는 화면의 제목인 'Discover'를 표시하고, bottom 속성을 통해 TabBar를 배치합니다.
   • TabBar는 개별 탭을 표시하는 위젯입니다. tabs 리스트를 순회하며 Tab 위젯을 동적으로 생성합니다. 각 탭은 tabs 리스트에 정의된 문자열로 라벨이 지정됩니다.
   • TabBar의 속성들(labelStyle, indicatorColor, labelColor, unselectedLabelColor)을 통해 탭의 스타일을 커스텀합니다.

3. TabBarView:

   • TabBarView는 각 탭에 해당하는 내용을 보여주는 위젯입니다. 이 위젯은 TabBar와 동기화되어, 사용자가 탭을 선택할 때 해당하는 내용을 표시합니다.
   • TabBarView의 children 속성에서도 tabs 리스트를 순회하며, 각 탭에 해당하는 내용으로 Center 위젯 내에 Text를 배치합니다. 이 Text 위젯은 선택된 탭의 이름을 큰 글자로 중앙에 표시합니다.

코드의 핵심 포인트:

• 동적 탭 생성: tabs 리스트를 이용해 TabBar와 TabBarView에 탭을 동적으로 생성합니다. 이는 탭의 개수나 내용이 변경될 때 유연하게 대응할 수 있게 해줍니다.
• 스타일링: TabBar의 다양한 속성들을 통해 탭의 외관을 커스텀할 수 있습니다. 예를 들어, 선택된 탭과 선택되지 않은 탭의 색상을 구분하여 사용자 경험을 개선할 수 있습니다.
• 내용 동기화: TabBar와 TabBarView는 DefaultTabController에 의해 자동으로 동기화됩니다. 사용자가 탭을 선택하면, TabBarView 내의 해당하는 내용이 보여지며, 이는 탭 인터페이스를 구현할 때 일관된 사용자 경험을 제공합니다.

이 코드는 Flutter에서 탭 기반의 인터페이스를 구현하는 일반적인 방법을 보여줍니다. 다양한 카테고리나 섹션을 구분할 때 유용하게 사용할 수 있습니다.