프론트엔드 개발자의 TIL #008

TIL #008

191111 월

 

---

오늘 배운 점

<Flutter>

1. ListTile - 이 주의 위젯

• 간단하게 리스트 내의 개체들을 예쁘게 배치해주는 위젯이다. 팔로잉/팔로워 목록 구현에 활용될 예정이다.

ListTile(
	leading: CircleAvatar(
    	backgroundImage: NetworkImage(imageUrl),
    ),
	title: Text('follwer id'),
    subtitle: Text('follower info'),
	trailing: Icon(Icons.keyboard_arrow_right),
    dense: true, //텍스트 크기 줄여서 더 많은 리스트 목록 한번에 볼 수 있음
    selected: true, //선택된 타일 색이 primary theme color로 바뀜
    onTap: (){
    	// move to user page
    },
),

ListView(
	children: ListTile.divideTiles(//타일 간 divider 추가됨
    	context: context,
        tiles: [
        	ListTile(),
            ListTile(),
            ListTile(),
        ],
    ).toList(),
),

 

2. AlertDialog - 이 주의 위젯

• 사용자에게 특정 행동 전 경고 메시지를 팝업 형태로 띄워준다. (안드로이드는 Material, iOS는 CupertinoAlertDialog)

void _showDialog() {
	showDialog(
    	context: context,
		//builder: (_) => AlertDialog(),
        builder: (BuildContext context) {
        	return AlertDialog(
            	title:Text('Reset?'),
				content: Text(''),
				actions: [
					DialogAction("No"),
					DialogAction("Yes"),
                    FlatButton(
                    	child: Text('Close'),
                        onPressed: () {
                        	Navigator.of(context).pop();
                        },
                    ),
				],
				elevation: 20.0,
				backgroundColor: Color.black,
				shape: CircleBorder(),
            );
        },
		barrierDismissible: false,
    );
}

3. ValueListenableBuilder

• 설정한 변수가 변할 때마다 builder를 호출하여 UI를 자동으로 업데이트한다. StreamBuilder보다 단순한 버전이다.

final ValueNotifier<int> _counter = ValueNotifier<int>(0);

ValueListenableBuilder(
	builder: (BuildContext context, int value, Widget child) {
    // _counter가 update될 때만 builder 호출
    	return Row(
        	children: <Widget> [
            	Text('$value'),
                child,
            ],
        );
    },
    valueListenable: _counter,
    child: Widget,
),
floatingActionButton: FloatingActionButton(
	child: Icon(Icons.plus_one),
    onPressed: () => _counter.value += 1, //_counter 상태 update
),

 

---

내일 배울 점

<Flutter>

1. 예전에 불필요한 상황에 사용하다 어려워서 버린(..) StreamBuilder를 제대로 공부해볼 예정이다.

2. Banner 관련 위젯을 e-commerce 관련 탭에 적용해볼 것이다.

3. Swipe 제스처로 삭제/핀 등의 액션을 취하는 기능을 구현할 예정이다.

---

- DRY code 작성은 생각보다 어렵다..!

- 블록체인 코딩 공부는 어떻게 할지 계획을 세워봐야겠다.