[Flutter] 클론 코딩(당근) 기능 추가 - ( week 2 )

당근 프로젝트에서 추가적으로 기능을 구현한다.

 

Like Button

좋아요 버튼을 클릭 시 하트의 색이 변경되도록 한다.

위젯의 상태가 변경되는 것이므로 해당 Feed 클래스를 Stateful로 변경해주어야 한다.

기능을 사용해서 클래스를 생성하면 기본적으로 StatelessWidget으로 만들어지는데 이를 Refactor를 사용해서 StatefulWidget으로 전환해 준다.

 

StatefulWidget은 두 가지 클래스로 구분이 되는데 build 함수는 State<Feed>를 상속받는 _FeedState 함수 내부에 있다. 따라서 필요한 기능은 이 영역에서 정의한다.

 

1. 상태 저장

상태를 저장하기 위해서 변수를 선언한다.

변수는 true, false로 저장되는 bool 타입으로 선언하며 기본값은 false로 해준다.

class _FeedState extends State<Feed> {

  bool isFavorite = false;  // 좋아요 여부

 

이제 하트 버튼을 클릭하게 될 때 isFavoirte값이 변경되도록 한다.

 

2. 상태값 변경 

좋아요 버튼을 구현한 영역에서 GestureDetector 위젯의 속성 중에서 onTap을 통해서 클릭 시 이벤트를 정의할 수 있다.

                  GestureDetector(

                    // 클릭시 반응하도록

                    onTap: () {

                      // 화면 갱신

                      setState(() {

                        isFavorite = !isFavorite; // 좋아요 토글

                      });

                    },

 

상태를 변경할 때는 항상 setState를 먼저 호출하고 그 내부에서 값을 변경해주도록해야지 변경된 값으로 위젯이 갱신된다.

isFavorite에 할당되는 값은 true면 false, false면 true로 전환시키는 토글 형식으로 값을 할당해 준다.

 

3. UI 반영

이제 isFavoirte의 값에 따라서 아이콘이 다르게 그려지도록 한다.

                      children: [

                        Icon(

                          //CupertinoIcons.heart,

                          //color: Colors.black54,

                          //size: 16,

                          isFavorite

                              ? CupertinoIcons.heart_fill

                              : CupertinoIcons.heart,

                          color: isFavorite ? Colors.pink : Colors.black,

                        ),

 

isFavorite ? : 이 문법은 삼항 연산자로 해당 값이 true인지를 묻는다.

true인 경우 채워진 하트 아이콘과 분홍색으로 false라면 빈 하트와 검은색으로 아이콘을 생성한다.

 

Feed List

이제 피드를 리스트 형식으로 만든다.

여기서 사용할 위젯은 ListView로 동일한 레이아웃에 다른 정보를 보여줄 때 유용하다.

SingleChildScrollView와 Column이 합쳐진 위젯으로 스크롤 가능한 Column과 같은 기능을 한다.

 

ListView

사용하는 방법은 ListView 위젯의 children 배열 안에 리스트 형식으로 보여줄 위젯을 만들어주면 된다.

하지만 이런 방식으로 리스트를 생성하는 것은 개수가 많아질수록 코드의 양도 많아지고 작업도 힘들어지는데 이럴 때 사용할 수 있는 다른 방법이 있다.

 

ListView.builder

children 내부에 작성할 개수가 적다면 문제가 없지만 많을 경우에는 builder를 통해서 필요한 만큼 리스트를 생성할 수 있다.

ListView.builder는 자동으로 내부에 들어가는 함수에서 context와 index를 사용할 수 있도록 넘겨준다.

itemCount는 생성할 전체 아이템 개수로 아이템을 생성하는 작업을 반복하는 횟수이다. index값은 itemCount가 될 때까지 증가하는데 itemCount가 100이라면 0 시작해서 99까지 증가한다.

 

builder의 속성 중에서 ItemBuilder는 필수적으로 요구되지만 itemCount는 꼭 필요하지 않으며 이 값을 정하지 않으면 무한대로 반복하게 된다.

 

이제 home_page.dart에서 Feed() 생성자를 호출하는 코드에서 해당 코드를 Builder로 감싸고 ListView.builder로 바꾸고 필요한 값들로 채워준다.

      body: ListView.builder(

        itemBuilder: (context, index) {

          return Feed();

        },

      ),

현재 상태에서 Feed는 무한대로 생성되는 상태이다.

 

ListView.separated

생성된 피드들이 구분되도록 피드마다 구분선을 추가해 준다.

builder를 separated로 변경하면 필수로 itemCount와 구분되는 영역에 보여줄 속성에 대한 정의가 필요하다.

      body: ListView.separated(

        itemCount: 10,

        itemBuilder: (context, index) {

          return Feed();

        },

        separatorBuilder: (context, index) {

          return Divider(); // 가로 구분선

        },

      ),

너무 꽉 차있어서 답답한 느낌이 든다. 리스트 전체의 좌우에 공간을 주고 리스트 내부 아이템들 사이도 공간을 줘서 보기 편하게 만들어 본다.

 

Padding

Padding으로 ListView를 감싸주고 여백을 준다.

      body: Padding(

        padding: const EdgeInsets.symmetric(horizontal: 16),

symmetric을 사용해서 대칭형으로 여백을 줄 건데 horizontal속성만 선언해서 가로에만 여백이 들어가도록 한다.

 

Padding으로 Feed를 감싸고 여백을 준다.

            return Padding(

              padding: const EdgeInsets.symmetric(vertical: 12),

              child: Feed(),

            );

          },

피드는 세로 방향에만 여백을 준다.

 

 

※ 이번 강의를 통해서 지난번 과제에서 혼자 검색해서 사용했던 ListView.builder에 대한 제대로된 사용법을 알게된거같다.