이번 시간에는 Material라이브러리에 기본적으로 정의가 되어있는 아이콘들을 사용해서 앱을 꾸며보는 시간을 갖도록 하겠습니다. 이전 시간에 사용했던 코드의 플로팅 액션버튼에 “+” 모양의 아이콘을 넣어볼게요. FloatingActionButton의 child값을 아래와 같이 Icon()으로 변경해주어 아이콘을 넣겠다고 명시합니다. 그리고 그 안에 인자로 Icons.add를 입력하여 기존의 Icons에 정의되어 있는 아이콘들 중 “+”모양의 아이콘을 사용하겠다고 명시합니다.
floatingActionButton: FloatingActionButton(
onPressed: () => {},
child: const Icon(Icons.add),
),그리고 하단의 네비게이션 바에도 아래와 같이 코드를 변경해주세요. bottomNavigationBar의 값으로 BottomNavigationBar()클래스를 선언하고, items배열에 Icons.home, Icons.business, Icons.school 이렇게 세개의 아이콘을 넣고 아이콘 밑에 라벨도 각각 Home, Business, School이라고 써줄거에요.
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
),
코드를 실행하면 왼쪽의 그림과 같이 플로팅 버튼에는 “+”아이콘이, 그리고 하단 네비게이션 바에는 각각 명시한대로 3개의 아이콘과 라벨이 각각 들어가있는 것을 확인하실 수 있습니다.
그 밖에 다른 아이콘들을 더 보고 싶으시면 Icons class페이지에서 확인하실 수 있습니다.
준비운동은 이만한면 된것 같아요. 여기까지 열심히 따라와 주셔서 감사합니다.
Android Studio와 화면 구성하는 방법에 대해 조금은 친근해지셨기를 바라면서, 다음 시간에는 실제 개발을 할때 구성하는 코드 구조에 대해서 공부하고 실제 프로젝트를 시뮬레이션하면서 더욱 풍부한 UI표현들을 배워보도록 하겠습니다. 감사합니다.