플러터로 SNS어플 만들기 6. ListView 이용하여 리스트뿌려주기

앱의 아이덴티티 를 조금 바꿔보고자 해요.

왜냐면 조카를 위한 sns 앱을 만들려고했는데

네이버밴드에서 그냥 하는게 나을거라고 생각되요 ㅋ

 

그래서  유아용품 SNS 앱으로 바꾸기로 했어요.

업체들이 유아용품 사진이랑 동영상올리고 그거 클릭하면 그냥 그 사이트로 링크로 연결되도록 할거에요

이것도 실제 사용은 못할수있지만 좀더 재미가있을거 같아서요.. 재미가있으면 집중력이 생기죠.

 

그래서 앱 아이콘이랑 앱이름도 바꿀건데 그건 나중에 하기로할게요 ㅋ

 

 

오늘의 작업 내용

 

1. ListView.bulder 일단 써보기

 

2. Class 단위의 위젯 만들기

 

3. Class에 인수전달하기

 

4. 랜덤색상 부여하기

 

 

1. ListView.bulder 일단 써보기

 

바텀 네비에보시면 

홈, 그리드뷰,마이라이크 ,마이페이지 이렇게 4개로 나눴는데

먼저 홈 부터 꾸며볼거에요

인스타 보면 홈 부분에 피드들이 올라오잖아요? 그게 리스트형태로 뿌려져서 무한정나오게돼죠. 그래서

 

ListView 라는 위젯을 사용해서 그렇게 만들어 볼거에요.

 

ListView 를 만드는건 여러가지방법이 있어요

기본 쌩짜로 ListView 를 써도되고 여러개있는데 그거는 다른포스트에서 다루기로 하고

저는 여기서는 ListView.Builder() 라는것을 사용할거에요.

 

(근데 최종적으로는 쌩짜 ListView를 이용하면서 .toMap() 이라는 걸 할껀데 일단은 ListView.Builder() 이거를 써요.)

 

 

홈 스크린 다트파일로와서 이렇게 고쳐줘요.

 

ListView.Builder()에는 2가지를 필수로 넣어줘요.

 

itemCount와

itemBuilder 에요.

 

itemCount에 대충 30개를 넣어봅시다. itemBuilder에는 저렇게 똑같이 적어보도록해요.

그럼 이렇게 나와요.

 

그럼 실험적으로 리스트가 나오는건 확인이되네요.

그럼 좀더 해볼게요.

 

 

2. Class 단위의 위젯 만들기

 

리스트 뷰나 그리드뷰에 내용물은 다르지만 같은 형태로 수십개씩 뿌려지는것들 한개한개들을 저는 Card 라고 해요.

이것을 Class화 해서 위젯으로 쓸거에요.

그래서 lib에 cards라는 폴더를 만들어서 다트파일 하나 만들고 그안에 PostCard라는 클래스를 만들어줬어요. 

 

기리고 컨테이너를 저렇게 꾸며줫어요.

 

그리고 홈스크린에 return 부분에 PostCard() 위젯을 불러왔어요.

그러니 이렇게 불려지긴하는데 경계선도 없고 하니 확인이 안되네요. 그래서 숫자를 줘볼거에요.

 

3. Class에 인수전달하기

 

포스트 카드 부분에 number 라는 인수를 받고

child 에 Text로 number를 표시하게 했어요.

ㅗ

그리고 homeScreen PostCard 리턴하는 부분에 인수로 인덱스를 넘겨줘요.

그러면 이렇게 나와요.

 

4. 랜덤색상 부여하기

 

뭔가 좀 부족해서 색깔을 넣어볼건데

단색넣으면 또 똑같으니까 랜덤색상을 부여할거에요.

요렇게 넣어주니

이런식으로 나오네요.

 

그러면 이거 height 만 좀 조절하고 해보면 인스타처럼 리스트뷰로 뿌려줄수있을거 같은 각이 나오네요.

그럼 연습은 이렇게 했고 본격적으로 PostCard를 좀 꾸며줘야겠어요.

그럼 다음포스트로 

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com