[Flutter] 이미지 없을 때 기본 이미지로 대체하기

이미지 없을 때 기본 이미지로 대체하기

위 그림처럼 이미지가 없으면 기본 이미지를 보여주는 예제는 아래와 같다.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {
  final PageController _pageController = PageController();
  int _currentPage = 0;
  String img_url_o = 'http://127.0.0.1:5000/api/image/sample';
  String img_url_x = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Stack(
                children: [
                  PageView(
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: [
                      buildBanner('Banner 1', 0),
                      buildBanner('Banner 2', 1),
                    ],
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          for (int i = 0; i < 2; i++)
                            Container(
                              margin: EdgeInsets.all(4.0),
                              width: 12.0,
                              height: 12.0,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: _currentPage == i
                                    ? Colors.grey
                                    : Colors.grey.withOpacity(0.5),
                              ),
                            ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 4,
              child: Column(
                children: [
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius:
                            BorderRadius.circular(10.0),
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 2,
                            blurRadius: 4,
                            offset: Offset(0, 2),
                          ),
                        ],
                      ),
                      child: img_url_x != null
                          ? Image.network(
                              img_url_x,
                              fit: BoxFit.cover,
                              errorBuilder: (context, error, stackTrace) {
                                // Display a default image when an error occurs
                                return Image.asset(
                                  'images/default_image.png',
                                  fit: BoxFit.cover,
                                );
                              },
                            )
                          : Image.asset(
                              'images/default_image.png',
                              fit: BoxFit.cover,
                            ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8.0),
                      padding: EdgeInsets.all(8.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius:
                            BorderRadius.circular(10.0),
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 2,
                            blurRadius: 4,
                            offset: Offset(0, 2),
                          ),
                        ],
                      ),
                      child: img_url_o != null
                          ? Image.network(
                              img_url_o,
                              fit: BoxFit.cover,
                              errorBuilder: (context, error, stackTrace) {
                                // Display a default image when an error occurs
                                return Image.asset(
                                  'images/default_image.png',
                                  fit: BoxFit.cover,
                                );
                              },
                            )
                          : Image.asset(
                              'images/default_image.png',
                              fit: BoxFit.cover,
                            ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildBanner(String text, int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.blueGrey,
      ),
      child: Center(child: Text(text)),
    );
  }
}

코드 설명:

이미지 URL이 유효한 경우에는 해당 URL로 이미지를 로드하고, 에러가 발생한 경우에는 기본 이미지로 대체된다.

기본 이미지로 대체하기 위해 errorBuilder 콜백 함수를 사용했다. errorBuilder는 이미지 로딩 중에 에러가 발생했을 때 호출되는 함수로, 해당 함수에서는 기본 이미지를 반환한다..

(Image.network 위젯의 fit 속성을 BoxFit.cover로 설정하여 이미지가 부모 컨테이너에 맞게 조정되도록 했다.)

위 코드에서 img_url_x와 img_url_o는 각각 이미지의 URL을 나타내는 변수. 유효한 이미지 URL을 할당하면 해당 이미지가 표시되고, null이나 빈 문자열인 경우에는 기본 이미지가 표시된다.

폴더 구조: