[flutter] 플러터 앱에 동적으로 로고 이미지 삽입하는 방법

22 Dec 2023

flutter

플러터 앱을 개발하다보면 동적으로 로고 이미지를 삽입해야 하는 경우가 있습니다. 이때 이미지를 동적으로 로드하고 표시하는 방법을 알아보겠습니다.

이미지 불러오기

우선 플러터 앱에서 동적으로 로고 이미지를 로드하기 위해서는 flutter_image 패키지를 사용할 수 있습니다. 이 패키지는 네트워크나 로컬 디바이스로부터 이미지를 가져와서 표시할 수 있도록 도와줍니다.

import 'package:flutter/material.dart';
import 'package:flutter_image/network.dart';

class LogoImage extends StatelessWidget {
  final String imageUrl;

  LogoImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Image(
      image: NetworkImage(imageUrl),
      fit: BoxFit.contain,
    );
  }
}

위 코드에서 LogoImage 위젯은 동적 이미지 URL을 받아서 네트워크로 이미지를 불러옵니다.

이미지 표시하기

로고 이미지를 표시하는 방법은 다양합니다. 예를 들어 LogoImage 위젯을 화면에 직접 배치하거나, ListView나 GridView와 같은 리스트 형태의 위젯 안에 넣어서 여러 이미지를 보여줄 수도 있습니다.

class LogoGrid extends StatelessWidget {
  final List<String> logoUrls;

  LogoGrid(this.logoUrls);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: logoUrls.length,
      itemBuilder: (BuildContext context, int index) {
        return LogoImage(logoUrls[index]);
      },
    );
  }
}

LogoGrid 위젯은 로고 이미지 URL 리스트를 받아서 GridView 위젯을 이용하여 그리드 형태로 이미지를 표시합니다.

이제 플러터 앱에서 동적으로 로고 이미지를 삽입하는 방법을 알아보았습니다.

이미지 불러오기

이미지 표시하기

참고 자료