Flutter Instagram Clone #4 SearchPage UI 작성

jakeseo_me·2020년 7월 23일
0

Flutter-Instagram-Clone

목록 보기
4/14

Flutter Instagram Clone #4 SearchPage UI 작성

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

화면 설계

이번에도 화면 설계는 완성될 화면을 기준으로 어떠한 클래스를 사용할지 결정한다. 이전에 안써봤던 GridView가 나온다. 그리고 저 글쓰기 버튼은 FloatingActionButton으로 처리하면 될 것 같다.

코드

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.create),
          backgroundColor: Colors.blue),
    );
  }

  Widget _buildBody() {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 1.0,
            crossAxisSpacing: 1.0),
        itemCount: 5,
        itemBuilder: (context, index) {
          return _buildListItem(context, index);
        });
  }

  Widget _buildListItem(BuildContext context, int index) {
    return Image.network(
      'https://i.pinimg.com/originals/65/77/11/657711832e28d7d79e3fc90947eb48eb.png',
      fit: BoxFit.cover,
    );
  }
}

여기서 이전에 배우지 않았던 것 중 하나는 역시 GridView이다.

설명이 매우 길게 적혀있다. 스크롤 가능한 위젯들의 2D 배열을 만든다고 적혀있으며 gridDelegate는 절대 null이 들어오면 안된다고 적혀있다.

SliverGridDelegateWithFixedCrossAxisCountGrid에 들어갈 내용의 레이아웃을 계산해주는 역할이다. 총 몇개가 들어갈지, 비율은 어떻게 할지, 공간은 얼마나 띄울지 등을 자동으로 계산해준다.

처음에는 Silver인줄알고 뭔뜻이지? 했는데 알고보니 Sliver라는 영어단어였다.

최종 결과

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글