[Flutter] 당근마켓 퍼블리싱 클론 코딩 정리 (2)

* 해당 코드의 모든 출처는 '모두가 할 수 있는 플러터 UI - 실전편' 입니다.

상세적인 전체 코드는 올리지 않았으며,
나중에 실무에서 코드를 작성할 때 참고하거나 기억하면 좋을 위젯, 코드들을 개인 정리 용으로 적어놓았습니다.

---

5. NeighborhoodLifeScreen

 

이 화면에서도 appBar 아래에 있는 헤더 부분(life_header),

한 게시물을 나타내는 body 부분(life_body)으로 나뉠 수 있다.

물론 life_body 내에서도

태그와 날짜를 나타내는 부분(_buildTop()),
프로필을 나타내는 부분(_buildWriter()),
본문 내용 (_buildWriting()),
이미지 (_buildImage()),
하단 공감/댓글 부분 (_buildTail())까지 아주 상세히 나뉘어 제작된다.

 

 

life_body 내에서 

스프레드 연산자와 Name 연산자 를 사용해서 ListView 를 작성한 코드는 다음과 같다.

body: ListView(
        children: [
          LifeHeader(),
          ...List.generate(
              neighborhoodLifeList.length,
              (index) => Padding(
                    padding: const EdgeInsets.only(bottom: 12.0),
                    child: LifeBody(
                      neighborhoodLife: neighborhoodLifeList[index],
                    ),
                  ))
        ],
      ),

 

* List.generate 생성자 :

neighborhoodLife.length 길이만큼 반복문을 돌면서 컬렉션 (여기서는 List)형의 자료구조를 생성한다.

스프레드 연산자('...')를 사용해서 만들어진 위젯을 하나씩 꺼내면서 List를 흩뿌린다.

 

 

6. NearMeScreen

 

검색바 부분 - 사용자의 입력을 받는 TextField

...생략...

child: TextField(
        // 서치 텍스트
        cursorColor: Colors.grey,
        decoration: InputDecoration(
          disabledBorder: _buildOutLineInputBorder(),
          enabledBorder: _buildOutLineInputBorder(),
          focusedBorder: _buildOutLineInputBorder(),
          filled: true,
          fillColor: Colors.grey[200],
          prefixIcon: Icon(
            CupertinoIcons.search,
            color: Colors.grey,
          ),
          contentPadding:
              const EdgeInsets.only(left: 0, bottom: 15, top: 15, right: 0),
          hintText: '좌동 주변 가게를 찾아 보세요.',
          hintStyle: TextStyle(fontSize: 18),
        ),
      ),

 

InputDecoration : 텍스트필드를 장식하는 속성 (테두리, 레이블, 아이콘 및 스타일 지정 가능하다.)

TextField 비활성상태 / 활성상태 일때의 border 값을 정할 수 있고,

포커스가 왔을때의 border 스타일도 지정할 수 있다.

 

 

* 수평 스크롤 위젯 : 

(태그 목록을 양옆으로 이동하며 볼 수 있는 위젯)

 

... 생략 ... 
SizedBox(
            height: 66,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: searchKeyword.length,
              itemBuilder: (context, index) {
                return Center(
                  child: RoundBorderText(
                    title: searchKeyword[index],
                    position: index,
                  ),
                );
              },
            ),
          ),
          
...생략...

 

ListView.builder() 내에서

height? : 수평 스크롤 되는 영역의 높이 값을 지정해 주었다. (높이를 주지 않을 경우 0이 되어, 화면에 보이지 않음)

scrollDirection : Axis.horizontal 을 활용하여 방향을 지정해주었다. (반대 : Axis.vertical)

---

* Wrap 위젯 : 배치하고자 하는 방향에 공간이 부족할 때 활용 가능하다.

자식을 Row 나 Column 으로 배치할 수 있고, 배치할 공간이 부족해지면 자식 위젯을 다음 줄에 배치한다. 

 

클래스로 만들어준 더미데이터를 가져다 쓸때, 

변수를 지정해서 돌려줄 수 있도록 한다. 

ex) ${recommendStore.storeName}, ${recommendStore.location}, ...