[flutter] 인스타그램 클론코딩_Search_page ui 작성

다음으로는 인스타그램 search page의 ui를 구성해보도록 하겠다.
우선 구현하고자 하는 ui 구조를 살펴보자.

정리하면 다음과 같다.
1. 사진을 grid로 배치할 기능이 필요하다.
2. floating action button이 필요하다.

전체 코드는 다음과 같다.

import 'package:flutter/material.dart';

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

  final List<String> _urls = const [
    'https://thumb.mtstarnews.com/06/2022/09/2022092418122613152_1.jpg',
    'https://cdn.mediafine.co.kr/news/photo/202305/30454_52145_5511.jpg',
    'https://cdn.topstarnews.net/news/photo/202307/15371470_1150533_2335.jpg',
    'https://img.hankyung.com/photo/202211/BF.31807042.1.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () { },
        child: const Icon(Icons.create),
      ),
      appBar: AppBar(
        title: const Text('instargram clone'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(2.0),
        child: GridView.builder(
          itemCount: _urls.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2.0,
            crossAxisSpacing: 2.0,
          ),
          itemBuilder: (BuildContext context, int index) {
            final url = _urls[index];
            return Image.network(
              url,
              fit: BoxFit.cover,
            );
          },
        ),
      ),
    );
  }
}

1. GridView.builder 생성

사진을 grid 모양으로 배치하기 위해선 GridView.builder를 생성해야 한다.

GridView.builder
GridView.builder는 플러터(Flutter)에서 제공하는 위젯 중 하나로, 리스트 형태의 데이터를 그리드(Grid) 형태로 표시할 때 사용된다.

gridDelegate
gridDelegate는 그리드의 레이아웃을 결정하는 델리게이트이다.
SliverGridDelegateWithFixedCrossAxisCount델리게이트는 그리드의 가로 방향(수평 방향)에 고정된 개수의 열을 가지도록 그리드를 정의하는데, 여기서는 가로 방향에 고정된 3개의 델리게이트를 가져야 하므로 이와 같이 설정한다
crossAxisCount를 통해 고정 갯수를 정할 수 있다.

itemBuilder
itemBuilder는 플러터(Flutter)에서 사용되는 위젯 중 하나로, 주로 리스트나 그리드와 같은 위젯에서 각 아이템을 동적으로 생성하는 데 사용된다. 인덱스를 매개변수로 받아 해당 위치에 표시할 위젯을 반환한다.

body: Padding(
        padding: const EdgeInsets.all(2.0),
        child: GridView.builder(
          itemCount: _urls.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2.0,
            crossAxisSpacing: 2.0,
          ),
          itemBuilder: (BuildContext context, int index) {
            final url = _urls[index];
            return Image.network(
              url,
              fit: BoxFit.cover,
            );
          },
        ),
      ),

itemCount를 통해 grid에 표시될 아이템의 갯수를 구한다. 여기서는 list로 구성된 아이템을 받아오기 때문에, 그 길이인 length를 지정하였다.

SliverGridDelegateWithFixedCrossAxisCount를 통해 가로방향으로 고정된 갯수의 열을 가지도록 그리드를 정의한다.

itemBuilder: (BuildContext context, int index)를 통해 _urls[index]의 이미지들이 return되도록 설정한다.

###2. floating 버튼 설정

return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () { },
        child: const Icon(Icons.create),
      ),
    )

버튼을 설정하는 부분은 늘상 했던 부분들과 같다. scaffold 객체의 맨 윗쪽에 생성해도 상관 없으므로 그렇게 구성하였다.

const Icon(Icons.create)을 통해 쓰기 아이콘이 생기도록 구성하였다.

3. 결과