[Flutter] 커스텀 위젯 (class문법, stless, ListView) [맥북 💻]

 목차

1. 커스텀 위젯
   1. 커스텀 위젯이란?
2. class 문법
   1. 사용 예시
   2. 문법 설명
3. ListView
   1. 사용 예시

 

 

 

✅ 커스텀 위젯

 

1️⃣ 커스텀 위젯이란?

• 레이아웃용 위젯들이 너무 많다면 커스텀 위젯 하나로 깔끔하게 축약가능
• 재사용이 가능하거나, header&bottom 등의 큰 페이지들에 주로 사용
• 긴 데이터를 축약하는 class 문법과 스크롤이 가능한 ListView를 사용할 수 있다

 

✅ class 문법

 

1️⃣ 사용 예시

1. 레이아웃용 위젯들이 많을 때
2. "stless" 입력 후 엔터 (or 자동완성)
   ** 상호작용 되지 않는 class 생성은 : "stless" 입력 후 tab ( = stateless widget)
   ** 상호작용 되는 class 생성은 : "stf" 입력 후 tab ( = stateful widget)
3. 커스텀 위젯 이름 입력
4. 축약하고 싶은 코드 잘라내기
5. 커스텀 위젯 return 뒤에 붙여넣기
6. 축약하려고 코드 잘라냈던 곳에 커스텀 위젯 이름() 입력 > 정상작동 확인

** 커스텀 위젯 외에 축약하는 방법으로, 변수를 사용해도 됨.

     ex) var a = SizeBox(child: Text('안녕'),); 

 

1. 레이아웃용 위젯들이 많을 때

2. "stless" 입력 후 엔터 (or 자동완성)

3. 커스텀 위젯 이름 입력

4. 축약하고 싶은 코드 잘라내기

5. 커스텀 위젯 return 뒤에 붙여넣기

6.축약하려고 코드 잘라냈던 곳에 커스텀 위젯 이름() 입력 > 정상작동 확인

 

 

2️⃣ 문법 설명

1. 커스텀 위젯은 class 로 만들어야 함
2. class 는 변수, 함수 보관함이라고 생각하면 쉬움
3. 커스텀 위젯은 추상 클래스랑 동일한 기능을 한다
4. 커스텀 위젯 두 번째 줄 (const test({Key? key} ....) 에서 어떤 파람 값을 넣을 수 있는지 정의하여 사용

 

✅ ListView

• 스크롤바를 사용시 필요
• 스크롤 위치 감시 가능
• 메모리 절약기능

 

1️⃣ 사용 예시

1. ListView() 사용

1. ListView() 사용