Stateless 와 Stateful의 차이점
- Stateless Widget
화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로 변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다.
예를 들어 지금 제작 중인 미소닭갈비 앱의 가게 안내, 메뉴 안내 화면처럼 사용자와 상호작용이 필요 없는 위젯 Stateless Widget으로 구성하면 된다.
- Stateful Widget
위젯이 동작하는 동안 Data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로 이벤트 또는 사용자 상호 작용에 의해 동작한다.
예를 들어 지금 제작 중인 미소 닭갈비 앱의 하단 탭 화면과 같이 탭 클릭에 따라 트리거를 처리하여 페이지 화면 변경이 필요한 위젯은 Stateful Widget으로 구성해야 한다.
App bar icon button
- leading : 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때
- ations : 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
- onPressed : 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의 한 곳
Drawer menu
return Scaffold(
appBar: AppBar(
title: Text('Appbar icon menu'),
centerTitle: true,
// elevation: 0.0,
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
print('Shopping cart button is clicked');
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('search button is clicked');
},
),
],
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: AssetImage('assets/pikachu.png'),
backgroundColor: Colors.white,
),
otherAccountsPictures: [
CircleAvatar(
backgroundImage: AssetImage('assets/dog.png'),
backgroundColor: Colors.white,
)
],
accountName: Text('Snoop'),
accountEmail: Text('Snoop@gmail.com'),
onDetailsPressed: (){
print('arrow is clicked');
},
decoration: BoxDecoration(
color: Colors.red[200],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
)
),
),
ListTile(
leading: Icon(
Icons.home,
color: Colors.grey[850],
),
title: Text('Home'),
onTap: (){
print('Home is clicked');
},
trailing: Icon(Icons.add),
),
ListTile(
leading: Icon(
Icons.settings,
color: Colors.grey[850],
),
title: Text('Setting'),
onTap: (){
print('Settings is clicked');
},
trailing: Icon(Icons.add),
),
ListTile(
leading: Icon(
Icons.question_answer,
color: Colors.grey[850],
),
title: Text('Q&A'),
onTap: (){
print('Q&A is clicked');
},
trailing: Icon(Icons.add),
),
],
)
),
BuildContext 란 ???
1. widget tree에서 현재 widget의 위치를 알 수 있는 정보이다.
2. build 함수는 Scaffold Widget을 리턴하는데 이때에 위젯트리상에서 어디에 위치해 있는가에 대한 정보를 가지고 있는 context라는 것을 넣어서 리턴해준다.
3. 모든 위젯은 자신만의 build context를 가지고 있다. build context는 stateless위젯이나 state 빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다.
3-1.
위에 코드처럼 Stateless위젯으로 MyPage라는 커스텀 위젯을 생성했고, MyPage인 커스텀 위젯도 자신만의 BuildContext 타입의 context를 가지고 있다. 이제 여기서 scaffold 위젯이 return이 되었고 이 때 이것은 부모인 MyPage의 context를 그대로 물려받는다는 의미이다.
Somthing.of(context) 의 의미 :
현재 주어진 context에서 위로 올라가면서 가장 가까운 Something를 찾아서 반환하라.