[Flutter] Image 위젯

개요

Flutter를 사용해서 앱을 개발해 보려고 합니다. 이번 블로그 포스트에서는 Flutter에서 이미지를 표시하는 방법에 대해서 알아봅니다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget

로컬 이미지 표시

Flutter에서 로컬 이미지를 표시하기 위해서는 우선, 이미지를 저장할 폴더가 필요합니다. 폴더 이름에는 어떠한 이름을 사용해도 되지만, 여기서는 assets라는 이름을 사용하였습니다.

그럼 프로젝트 폴더 안에서 assets 폴더를 생성합니다.

flutter create my_app
cd my_app
mkdir assets

그리고 해당 폴더에 화면에 표시하고자 하는 이미지를 복사합니다.

Flutter에서 화면에 이미지를 표시하기 위해서는 이미지 파일 또는 폴더를 pubspec.yaml에 작성할 필요가 있습니다.

그럼 pubspec.yaml 파일을 열고 다음과 같은 부분을 찾습니다.

# To add assets to your application, add an assets section, like this:
# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg

이미지 파일을 추가하기 위해 다음과 같이 주석을 해제하고 수정해 줍니다.

# To add assets to your application, add an assets section, like this:
assets:
  - assets/bunny.gif
  - assets/profile.png

위와 같이 이미지 파일을 하나씩 하나씩 지정해도 되지만, 다음과 같이 해당 폴더를 지정해도 됩니다.

# To add assets to your application, add an assets section, like this:
assets:
  - assets/

그럼 이제 저장한 파일을 화면에 표시하기 위해 다음과 같이 main.dart 파일을 수정합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Center(
        child: Image(image: AssetImage('assets/profile.png')),
      ),
    );
  }
}

이미지를 표시하기 위해서는 다음과 같이 Image 위젯을 사용하며, 로컬 이미지를 사용할 때에는 AssetsImage 위젯을 사용하여, 표시하고자 하는 로컬 이미지를 지정합니다.

Image(image: AssetImage('assets/profile.png'))

이렇게 main.dart 파일을 수정하고 Flutter 프로젝트를 실행하면 다음과 같이 로컬 이미지가 잘 표시되는 것을 확인할 수 있습니다.

다음과 같이 Image 위젯의 다양한 옵션을 사용하여 이미지를 표시할 수 있습니다.

Image(
  image: AssetImage('assets/profile.png'),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

또는 다음과 같이 사용할 수 있습니다.

Image.asset('assets/profile.png')

다음과 같이 옵션을 사용할 수 있습니다.

Image.asset(
  'assets/profile.png',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

@2x, @3x

여러 해상도를 지원하기 위해, 보통 이미지를 생성할 때 2x, 3x를 생성하고 해당 이미지를 사용합니다. Flutter에서는 2x, 3x 해상도의 이미지를 사용하기 위해서는 다음과 같이 2.0x 폴더와 3.0x 폴더를 생성해야 합니다.

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

이렇게 동일한 이름의 파일을 각각의 폴더에 추가하면 Flutter에서는 이를 인식하고 해상도에 맞는 이미지를 자동으로 사용하게 됩니다.

네트워크 이미지

그럼 이제 서버에 있는 이미지를 표시하는 방법에 대해서 알아봅시다. 네트워크에 있는 이미지를 표시하기 위해서는 다음과 같이 AssetImage 대신 NetworkImage 위젯을 사용하면 됩니다.

Image(
  image: NetworkImage(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  ),
),

다음과 같이 옵션을 사용할 수 있습니다.

Image(
  image: NetworkImage(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  ),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),

로컬 이미지와 같이 다음처럼 사용할 수 있습니다.

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
)

다음과 같이 옵션을 사용할 수 있습니다.

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),

완료

이것으로 Flutter에서 로컬 이미지와 네트워크 이미지를 표시하기 위해 AssetsImage와 NetworkImage 위젯을 사용하는 방법에 대해서 알아보았습니다. 또한 Image 위젯의 Named 생성자를 통해 로컬 이미지와 네트워크 이미지를 표시하는 방법에 대해서도 알아보았습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!