아이콘의 정렬은 mainAxisAlignment를 spaceBetween으로 해도 되고 아이콘 사이에 Spacer를 넣어주어도 동일하게 동작한다. IconButton의 경우 아이콘에 기본 패딩이 들어가 있기 때문에 해당 패딩을 제어해서 처리해도 되지만 더 간단하게 Icon과 GestureDetector를 쓰도록 한다.
Column(
children: [
GestureDetector(
onTap: () {
DefaultTabController.of(context)!.animateTo(0);
},
child: Icon(
Icons.person,
color: Colors.white,
),
),
Text(
"라이브러리",
style: TextStyle(
color: Colors.white,
),
),
],
),
Column(
children: [
GestureDetector(
onTap: () {
DefaultTabController.of(context)!.animateTo(2);
},
child: Icon(
Icons.show_chart,
color: Colors.white,
),
),
Text(
"차트",
style: TextStyle(
color: Colors.white,
),
),
],
),
기본 색상이 블랙이기 때문에 white로 변경해 주고 눌렀을 때 동작을 추가해 준다. 여기서 DefaultTabController.of(context)~의 context는 페이지에 대한 정보를 가져온다.
그리고 아이콘에 여백을 주기 위해서 아이콘들을 묶었던 Row를 Padding으로 묶고 여백을 준다.