Q. 코드가 너무 길고 복잡하다. 보기도 싫다. 이걸 한 단어로 축약할 순 없을까?
A. 커스텀 위젯을 ㅆㅂ
1.stless 를 입력하고 tap 키를 누르면 아래 커스텀 위젯이 뿅나온다.
class extends StatelessWidget {
const ({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}이후 할일은 딱 두개다.
1)class 옆에 불러올 커스텀 위젯 '이름'을 정해주고 (단 대문자 시작!)
이번엔 Special로 해봤다.
2) 그리고 return const 옆에 축약할 코드를 넣어주면 완성!
사용법은 원하는 위치에 이름() 을 넣어주면 된다. (위젯이니까 () 괄호가 필요)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: Special()
),
2.문법 소개
class Special extends StatelessWidget {
const Special({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const SizedBox(
child: Text('안녕'),
);
}
}line1
Class 는 변수와 함수를 보관하는 통.
extends 는 오른쪽에 있는 Class(변수, 함수 모음)을 복사해서 왼쪽으로 옮겨주세요
*오른쪽에 있는 StatelessWidget 은 하나의 완벽한 위젯인데 여기에 있는 변수와 함수를 왼쪽으로 복붙한다.
line2
저 Class에 어떤 파라미터 넣을 수 있는지 정의하는 부분. (아직 모름)
line3
-Widget , BuildContext 는 타입 지정하는 문법이라 지워도 무방 build(context) 해도 무방.
-Class 안에 build라는 함수를 만드는 영역임. (자바에선 함수만들때 function build() 처럼 펑션 키워드 필요한데
플러터(다트언어)에선 그냥 build(context)하면 함수 완성.
-그럼 build 함수가 왜 들어있냐? -> 그냥 그렇다. build라는 함수가 있어야 widget 으로 인정해준다.
line4
return Class 라는 위젯 이름 넣으면 출력될 코드들.
근데! @override 이거 뭐임?
=변수, 함수 중에 중복이 있으면 @override 아래 꺼 먼저 해주세요~
*StatelessWidget 의 변수함수를 복붙해올건데 거기안에 @override 아래 부분과 겹치는 변수, 함수 있으면 아래꺼 부터 적용해주세요~
3.쉬운 축약 방법
var 같은 변수에다가 담아도 됨.
var Special2 = SizedBox(
child: Text('안녕'),
);
*단, 평생 안바뀌는 것만 변수에 담아라. 안에 데이터 바뀌는 것 담아놓으면 나중에 성능상 이슈가 생길 수 있음.
*내부 바뀌는 것들은 커스텀 위젯으로 관리해라
4.추가 주의사항
Q.아무거나 다 커스텀 위젯화 해도 되나?
A.그럼 나중에 State 관리 어려워짐. 재사용 많은 UI 덩어리들을 커스텀 위젯으로 만들어 놓으면 편함.
5. Listview() 컬럼인데 스크롤바 있는 컬럼
body: ListView(
children: [
Text('1'),
Text('1'),
],
),
*ListView가 좋은 점
1)controller 파라미터 넣으면 스크롤 위치 감시도 된다. (유저가 어디쯤 보고있나? 얼마나 스크롤했나? 위치 확인)
2)유저가 보고 있지 않은 위치는 삭제를 해서 메모리 절약 즉, 성능개선에도 도움을 줌.
3)긴 목록 (컬럼)이 필요할 때 리스트뷰가 좋다.
body: ListView(
controller: ,
children: [
Text('1'),
Text('1'),
],
),*쇼핑몰 앱, SNS 피드 목록 다 ListView
5.오늘의 숙제
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Container(width: 500,
child: ListView(
children: [
Row(mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.person_pin, size: 40,),padding: EdgeInsets.all(10)),
Text('홍길동', style: TextStyle(fontSize: 15,),)
],
),
Row(mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.person_pin, size: 40,),padding: EdgeInsets.all(10)),
Text('홍길동', style: TextStyle(fontSize: 15,))
],
),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
A(),
],
),
),
bottomNavigationBar: BottomAppBar(height: 80,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.phone)),
IconButton(onPressed: () {}, icon: Icon(Icons.chat_bubble_outline_outlined)),
IconButton(onPressed: () {}, icon: Icon(Icons.find_in_page_rounded)),
],
)
),
),
);
}
}
의문점
1.중간 홍길동 있는 Row에서 패딩을 어케 줘야 아이콘과 텍스트 사이 간격을 줄 수 있지?