[flutter 플러터] 46강 강의리뷰_이미지와 아이콘 삽입 방법 (Image and Material Icons)

화면에 이미지를 추가하는 방법은 한참 이전의 강의에서 다루었지만 이번에 함께 아이콘과 묶어 작성하려고 한다. 먼저 화면에 이미지를 삽입하는 것은 바로 이전 글의 폰트 변경과 유사하다.

 

*공식 문서: https://api.flutter.dev/flutter/widgets/Image-class.html

 

 

화면에 이미지를 삽입하는 방법

1. (안드로이드 스튜디오 좌측 사이드바) 프로젝트 폴더에 'images' 폴더를 생성한다.

2. 화면에 삽입하고자 하는 이미지 파일을 위 images 폴더에 추가한다.

3. 파일의 'pubspec.yaml' 에서 프로젝트의 에셋으로 이미지를 추가한다. (아래 예시 코드 참고)
*특정 이미지 파일 단위로 추가할 수도 있고, 또는 images 폴더 단위로 추가하여 폴더에 있는 들어있는 전체 이미지를 프로젝트에 추가할 수도 있다.

4. pubspec.yaml 파일에서 Pub get 버튼을 클릭한다. (업데이트 역할)

5. 'main.dart' 파일에서 다양한 위젯을 활용하여 이미지를 추가한다.
5-1. Image, backgroundImage 등의 위젯 (
프로퍼티 image: AssetImage:( 'images/(파일명_파일형식 포함)' ) ) 
5-2. Image.asset( 'images/(파일명_파일형식 포함)' ) 위젯
*2번의 방법을 사용하면 1번보다 상대적으로 라인 수가 짧아진다.

 

---

 

그 다음으로, 화면에 아이콘을 삽입하고자 할 때는 어떻게 해야할까? 플러터는 다양한 아이콘 이미지를 간편하게 사용할 수 있도록 제공한다. Icon 위젯의 프로퍼티로 Icons.(삽입하고자 하는 아이콘의 이름 또는 주제) 를 입력하면 된다. 앱에서 사용되는 대부분의 아이콘 이미지를 제공하기 때문에 굳이 따로 .png 를 삽입할 필요가 없어 정말 간편하다. 

 

*공식 문서: https://api.flutter.dev/flutter/widgets/Icon-class.html

 

---

이미지 삽입과 아이콘 삽입, 위 두가지 내용을 담은 예시 코드는 아래와 같다.

 

// 이상 생략

child: Column( // 세로로 나열
            children: <Widget>[
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('images/ohyoonjin.png'),
              ), // CircleAvatar
              
              
// 중략

child: Row( // 가로로 나열
                  children: <Widget>[
                    Icon(
                      Icons.call,
                      color: Colors.teal.shade900,), // Icon