[Flutter] 이미지 사용하기

04 Apr 2021 in Devlog on Flutter

• Assets 폴더 생성
• Image 파일 연결
• Background Widget 작성
• 코드 수정 및 실행

이번에는 배경화면에 사진을 넣어보겠습니다. 이를 위해서 먼저 assets 폴더를 만들어야 합니다. assets 이란 Flutter 에서 사진, 동영상와 같은 외부 파일을 사용할 때, 이러한 외부 파일을 모아두는 폴더를 뜻합니다.

Assets 폴더 생성

먼저 프로젝트 폴더 우클릭 -> New -> Directory -> Name 에 'assets' 작성 하여, assets 폴더를 생성해 줍니다. 여기서 ‘프로젝트 폴더’ 란 왼쪽 Project 창에서 제일 상단에 있는 폴더를 뜻합니다.

assets 폴더가 생성이 완료되었으면, assets 폴더안에 같은 방식으로 images 폴더를 생성해 줍니다. 이제 Flutter 에서 사용할 image 파일은 모두 images 폴더에 보관할 것입니다. (참고로, assets 폴더 외에는 꼭 특정이름을 사용할 필요는 없습니다. 필요에 따라, 편한 이름을 사용해도 됩니다.)

Image 파일 연결

이제 사용할 이미지 파일을 다운받아 images 폴더에 넣어줍니다. 저는 https://pixabay.com/ko/ 사이트에서 임의로 사진 한장을 사용하였습니다.

이제 pubspec.yaml 폴더를 선택해 줍니다. 이후 아래와 같은 주석을 찾아 다음과 같은 코드를 작성해 줍니다.

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  
  # TODO: 아래 코드 작성
  assets:
  - assets/images/

이후 우측 상단의 Pub get 버튼(또는 terminal 에 flutter pub get 입력)을 눌러줍니다. 이로서, 프로그램에서 image 파일을 인식할 수 있게 되었습니다.

Background Widget 작성

이미지를 표현할 Widget 을 작성해 줍니다. 아래 코드는 child, imagePath 를 입력받아, image 를 배경화면으로, child 를 화면에 표시해주는 Widget입니다.

class BackGround extends StatelessWidget {

  final Widget child;
  final String imagePath; // 이미지 주소는 assets 폴더를 현재 폴더로 간주 후 입력, ex - images/background.jpg

  BackGround({this.child, this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(imagePath),
          fit: BoxFit.cover,
        )
      ),
      child: child,
    );
  }
}

Image 를 사용하는 방법은 여러개가 있지만, 여기서는 Container 의 decoration 옵션을 통해 이미지를 사용하였습니다. 위의 코드를 외울 필요는 없고, 필요시 Google 을 통해 검색하여 보시기 바랍니다.

final 키워드는 ‘변수에 한번 값이 지정되면, 변경할 수 없음’ 을 뜻합니다. StatelessWidget 이 @immutable 이기 때문에, 생성자 (Constructor) 를 통해 입력받는 변수는 위와 같이 final 키워드를 앞에 붙여 주셔야 합니다.

또한 this.{변수 명} 을 이용하면, 생성자를 간단하게 작성할 수 있으며, {} 를 사용하면 선택적으로 변수를 받아오는 것도 가능합니다.

코드 수정 및 실행

기존에 Scaffold Widget 의 body 옵션에 작성되어 있는 Widget 을 우클릭 -> Show Context Actions -> Wrap with Widget 하여, Widget 으로 감싸준 후, 감싼 Widget 이름을 BackGround 로 수정, imagePath 옵션에 assets 에 추가한 이미지 경로를 입력해 줍니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: BackGround(
        imagePath: 'images/background.jpg',
        child: Padding( 							// 기존 body 로 사용 중이던 Widget
          padding: const EdgeInsets.all(20.0),
          ...
        )
      )

아래는 실행 결과입니다.

** 참고로 AssetImage 대신 NetworkImage 를 이미지 주소를 이용해서 이미지를 불러오는 것이 가능합니다. 이 경우, assets 을 사용할 필요가 없어 간편하긴 하지만, (1) 인터넷 사용이 필요해지고, (2) 이미지 주소에 문제가 생기면 사용이 불가능해 진다는 단점이 있습니다. 해당 부분은 직접 사용해 보시기 바랍니다.