다국어 지원을 위해 flutter_localizations를 사용하는 Flutter 앱을 개발 중이라면, 이미지 로딩 시 각 언어에 맞는 이미지를 효율적으로 로딩하려면 어떻게 해야 할까요? 이번 블로그에서는 flutter_localizations를 이용하여 여러 언어에 대한 지원 이미지를 로딩하는 방법에 대해 소개하겠습니다.

1. 이미지 파일 구성

우선, 프로젝트의 이미지 파일을 다국어에 따라 폴더를 나누어 구성해야 합니다. 예를 들어, assets/images 폴더 안에 en 폴더와 ko 폴더를 생성하여 영어와 한국어에 해당하는 이미지를 넣습니다. 폴더 구성은 아래와 같습니다.

- assets
  - images
    - en
      - image.png
    - ko
      - image.png

2. pubspec.yaml에 이미지 경로 추가

이미지를 로딩하는 데 필요한 pubspec.yaml 파일에 이미지 경로를 추가합니다. 아래 예시처럼 flutter 섹션 안에 assets를 추가합니다.

flutter:
  assets:
    - assets/images/

3. 지역화 지원 이미지 로딩

flutter_localizations 패키지를 이용하여 앱의 언어를 변경하면서 해당 언어에 맞는 이미지를 로딩하려면, 이미지를 로딩하는 코드를 아래와 같이 작성합니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/images/${Localizations.localeOf(context).languageCode}/image.png'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [
      const Locale('en', ''),
      const Locale('ko', ''),
    ],
    home: MyHomePage(),
  ));
}

위의 예시 코드에서 Image.asset의 경로 부분에 ${Localizations.localeOf(context).languageCode}를 이용하여 현재 앱의 로캘에 맞는 폴더 경로를 동적으로 지정합니다.

이제 flutter_localizations를 사용하여 각 언어에 맞는 이미지를 로딩하는 방법에 대해 알아보았습니다. 앱의 다국어 지원 개발 시 유용하게 활용할 수 있을 것입니다.

참고문헌:

• Flutter Internationalization