5. 프로필 앱 만들기-끝

  Widget _buildTabBarView(){
    return TabBarView(
      controller: _tabController,
      children: [
        Container(color: Colors.green),
        Container(color: Colors.red),
      ],
    );
  }
}

GridView.builder는 성능을 고려한 그리드 레이아웃을 동적으로 생성할 수 있는 위젯이다. itemBuilder를 통해 각 그리드 셀에 표시할 이미지를 네트워크에서 불러온다. crossAxisSpacing: 10, - 간격 조정 crossAxisCount: 3, - 가로에 3개의 셀 mainAxisSpacing: 10, - 간격 조정 itemCount: 42, - 불러올 아이템의 수

 

 Widget _buildTabBarView(){
    return TabBarView(
      controller: _tabController,
      children: [
        GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisSpacing: 10,
                crossAxisCount: 3,
                mainAxisSpacing: 10,
            ),
            itemCount: 42,
            itemBuilder: (context, index) {
              return Image.network(
                "https://picsum.photos/id/${index + 10}/200/200");
            },
        ),
        GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisSpacing: 10,
            crossAxisCount: 3,
            mainAxisSpacing: 10,
          ),
          itemCount: 42,
          itemBuilder: (context, index) {
            return Image.network(
                "https://picsum.photos/id/${index + 30}/200/200");
          },
        ),
      ],
    );
  }
}