커스텀 위젯과 ListView() 위젯 사용 방법!

새로운 마음으로 시작한 프로젝트 :)

 

1. Custom Widget 사용 방법

2. 궁금할까봐 해주신 문법 설명

3. Custom Widget 말고 변수/함수로도 축약 가능

4. 아무거나 다 Custom Widget으로 만들지 말걸아,,,

5. ListView() 사용 방법

6. 숙제!

---

 

1. Custom Widget 사용 방법

레이아웃을 만들고 싶은데 너무 길다?

단어 1개 작명해서 깔끔하게 할 수 있다 = 커스텀 위젯!

 

 

 

맨 밑에 stless라는 단어를 입력하고 Tab이나 Enter를 누르면 class ~ 어쩌고 저쩌고 하는 코드 몇줄이 자동으로 생성된다.

이때 따로 뭔가를 클릭하거나 키보드를 누르지 않은 상태면 class 뒷 부분이 선택된 채로 타이핑할 수 있는데, 여기가 [작명]하는 부분임

나는 코딩애플 아저씨 따라서 ShopItem이라는 이름을 타이핑 해줬다.

밑에 return 다음부터 원하는 레이아웃 코드들 써주면 댐!

 

 

 

 

 

2. 궁금할까봐 해주신 문법 설명 (ㅋㅋ)

첫 번째 줄: 커스텀 위젯은 class로 만든다.

class가 무엇인고...?

변수, 함수를 보관하는 통을 그냥 class라고 부른다고 가르쳐주심... ㅎ

하지만 class를 하나 만든다고 커스텀 위젯으로 인정해주지 않는다고 함.

인정 받으려면 class 안에 변수, 함수를 많이 넣어야 함.

이미 완성된 위젯을 복사해서 class 만들 수 있음.

extends: 오른쪽에 있는 클래스를 복사해서, 거기 있던 변수/함수들을 왼쪽으로 다 옮겨주세요~라는 문법이라고 함

 

 

 

두 번째 줄은 몰라도 된다고 함... 나중에 쓰게 되면 설명해주시겠다고 함... (넹.,, ㅎㅎ)

 

세 번째 줄, 네 번째 줄

캡쳐에서 노란 글씨로 표현된 부분은 모두 지워도 상관 없다고 함.

타입 지정하는 문법이기 때문에. (???)

다 지우면 함수가 하나 남는데 build임 = 이 함수가 꼭 있어야 위젯으로 인정해준다고 함

JavaScript에서는 function작명(){} 이렇게 만들어야 하는데,

Dart에서는 function 입력 없이 작명(){}하면 돼서 편한거라고 함

암튼 내가 작명한 클래스 이름 쓸 때마다 이 레이아웃이 복붙되는 것임!

 

 

근데 세 번째 줄의 @override 이거 머임?

위에서 가르쳐주셨듯 extends는 오른쪽 변수/함수 복붙해서 왼쪽으로 가져가주는 애임

→ 중복이 발생할 것 같지 않음?? 오른쪽에서두 build 있으면 어쩔거임??

그래서 @override는 내꺼 먼저 적용해달라는 거임.

이 밑에 내가 쓴 함수/변수를 먼저 적용해주는 거임. 덮어쓰기.

 

암튼 커스텀 형식 만들 일 있으면 이 형식들 잘 맞춰서 쓰면 댐!

 

 

 

 

 

3. Custom Widget 말고 변수/함수로도 축약 가능

변수: 길고 복잡한 자료들을 잠깐 저장해놓는 문법 (?)이라고 함.

var a = SizedBox(
	child: Text('안녕'),
); // SizedBox

var라고 입력한 부분이 변수를 만드는 부분 같음...

근데 이렇게 하면 성능 상 이슈가 있을 수 있다고 함.

 

변수에 담아도 되는 것들은 정해져 있다고 함.

예를 들면 평생 안바뀌는 것들! (로고, 상단바, 하단바 ...)

 

내용에 들어간 데이터들이 실시간으로 바뀐다 (예를 들면 좋아요 개수)

이런건 변수에 넣으면 안되고, class 문법을 사용한 커스텀 위젯으로 하는 게 옳다고 함. 대부분이 이런 경우라고 함...

 

 

 

 

 

4. 아무거나 다 Custom Widget으로 만들지 말걸아,,,

커스텀 위젯은 state 관리하기 힘들 수 있다고 함. 이건 나중에 알게 된다고 함 ... ㅎㅎ

그래서 이런 경우에 커스텀 위젯으로 만들어두면 좋다고 함.

• 재사용 많은 UI 덩어리들
• 큰 UI들 = 페이지들 같은거 (← ? 먼말이지? 이해 못했음 ㅋㅋㅋㅋ)

 

 

 

 

5. ListView() 사용 방법

보여줄 항목이 100개면 어뜨캐요... 컬럼 써서 다 나열해도 되긴 하는데 그러면 스크롤이 안생기고 앱은 원래 그렇다함

(헐;)

 

그래서 컬럼이 아니고 ListView() 위젯을 쓰는 게 좋다고 한다. 그럼 스크롤 바 생김!

 

ListView 쓰면 좋은 점

• 스크롤 자동으로 생김
• 스크롤 위치 감시 가능 (controller: , 파라미터 이용)
• 메모리 절약 가능 (= 성능 개선 가능)

 

 

 

 

 

6. 숙제!

ListView()를 이용해서 아이콘 + 텍스트로 이루어진 아이템을 나열하는 숙제...

 

bottomNavigationBar 이용해서 커스텀 위젯도 활용해서 아이콘 나열한거 만들어오기...

엄,, 저 아이콘 있는 부분을 커스텀위젯으로 만들어야 하는 건가...? ㅇ<-<

재사용 많이 하는 UI 하면 된다고 했는데...

오히려 안바뀌는 부분이니까 변수로 해야하는 거 아닌가??? ㅇㅅㅇ...