[Flutter] GridView와 TabBar 이해하기(프로필앱)

GridView의 기능

GridView의 주요 특징

• 스크롤 가능: 스크롤 가능한 그리드 레이아웃을 쉽게 구현할 수 있습니다.

• 자동 크기 조정: 화면 크기에 따라 아이템의 배치가 자동으로 조정되며, 유동적인 그리드 레이아웃을 생성할 수 있습니다.

• 다양한 그리드 레이아웃 옵션: GridView.count, GridView.extent 등 다양한 레이아웃 옵션을 제공합니다.

TabBar의 기능

TabBar의 주요 구성 요소

1. TabController:
• TabBar와 TabBarView를 연결하고, 탭을 전환할 때 상태를 관리하는 컨트롤러입니다.
• 탭을 눌렀을 때 어떤 탭이 활성화되는지를 관리합니다.
• 보통 StatefulWidget에서 SingleTickerProviderStateMixin을 사용하여 TabController를 생성합니다.

2. TabBar:
• 탭 메뉴를 표시하는 위젯입니다. 탭은 보통 Tab 위젯을 사용하여 정의됩니다.
• 각 탭은 텍스트, 아이콘 또는 둘 다 포함할 수 있습니다.

3. TabBarView:
• 탭에 대응하는 내용을 표시하는 위젯입니다.
• TabBar에서 선택된 탭에 따라 TabBarView의 페이지가 전환됩니다.

GridView와 TabBar 예시(프로필 앱)

DefaultTabController(
      length: 2, // 탭의 개수
      child: Column(
        children: [
          TabBar(
            tabs: [ // 나타낼 탭
              Tab(icon: Icon(Icons.accessibility_new_outlined)), 
              Tab(icon: Icon(Icons.account_circle_sharp)),
            ],
          ),
          Expanded(
            child: TabBarView( // 탭에 나타날 뷰
              children: [
                GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,   // 한 줄에 카운트될 개수
                    crossAxisSpacing: 5, // 가로 방향으로 공간띄우기
                    mainAxisSpacing: 5,  // 세로 방향으로 공간띄우기
                  ),
                  itemBuilder: (context, index) => SizedBox( // 채워질 item
                    height: 200,
                    child: Image.network(
                      "https://picsum.photos/id/${200 + index}/200/300",
                      fit: BoxFit.cover,
                    ),
                  ),
                  itemCount: size,
                  physics: NeverScrollableScrollPhysics(),
                ),
                Container(color: Colors.red),
              ],
            ),
          ),
        ],
      ),