Flutter 프로필 앱 (2) - Gride View

GrideView란?

수평방향이나 수직방향으로 고정 수의 위젯을 생성, 반복해서 List를 출력해주는 위젯이다.

 

Builder 속성을 이용해 그리드 뷰 사용하기

import 'package:flutter/material.dart';

class ProfileTab extends StatefulWidget {
  const ProfileTab({Key? key}) : super(key: key);

  @override
  State<ProfileTab> createState() => _ProfileTabState();
}

class _ProfileTabState extends State<ProfileTab>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  @override
  void initState() {
    // 최초의 클래스가 실행 될 때 한번만 실행한다.
    // TODO: implement initState
    super.initState();
    _tabController = new TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildTabBar(),
        Expanded(child: _buildTabBarView()),
      ],
    );
  }

  Widget _buildTabBar() {
    return TabBar(
      controller: _tabController,
      tabs: [
        Tab(icon: Icon(Icons.directions_car)),
        Tab(icon: Icon(Icons.directions_transit)),
      ],
    );
  }

// GridView 부분
  Widget _buildTabBarView() {
    //builder는 생성자를 초기화 할때 사용 한다. (나중에 더 공부 하기)
    return TabBarView(
        controller: _tabController,
        children: [
      GridView.builder(
          itemCount: 42, // 뷰 해줄 아이템 갯수
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 가로로 3개
              crossAxisSpacing: 10, // 세로 여백
              mainAxisSpacing: 10),// 가로 여백
          itemBuilder: (context, index) {
            print("번호 : ${index}");
            return Image.network(
                "https://picsum.photos/id/${index + 10}/200/200");
          }),
      Container(
        color: Colors.green,
      ),
    ]);
  }
}

 

GridView에선 아이템 갯수인 42개를 한번에 모두 메모리에 저장해두지 않고, 현재 화면에서 보여지는 갯수만 메모리에 올려둔 후, 스크롤을 내릴 때 마다 새로 받아오는 형식으로 동작한다.