【Flutter】【FadeInImage】이미지를 URL(network)로부터 표시할 때의 표시 방법

머리

URL(network)에서 이미지를 표시할 때 가장 간단한 것은 Image.network() 로 표시할 수 있습니다.

다만 FadeInImage 를 사용하면 또 다른 표시를 할 수 있을 것 같습니다.
로드 시간에 어떤 것을 표시할지 선택할 수 있는 것 같기 때문에 샘플을 만들어 보았습니다.

FadeInImage

FadeInImage 는 FadeInImage.assetNetwork 와 FadeInImage.memoryNetwork 의 두 종류가 있습니다.
- FadeInImage.assetNetwork 은 URL 이미지를 표시하기 전에 로컬에 저장된 이미지를 표시
- FadeInImage.memoryNetwork 메모리에 저장된 이미지를 사용
같다

FadeInImage.memoryNetwork를 사용할 때

FadeInImage.memoryNetwork 를 사용할 때는 transparent_image 이라는 패키지를 사용합니다.

이 패키지는 kTransparentImage 라는 placeholder 를 설정할 수 있게 됩니다.

이제 URL의 이미지를 볼 때 투명한 Widget에서 이미지가 페이드 인되는 거동이됩니다.
(점점 더 보이는 느낌)

사용법

사용법은 이런 느낌입니다.
FadeInImage.memoryNetwork

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage, //transparent_image
  image:
      'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png',
),

FadeInImage.assetNetwork(

FadeInImage.assetNetwork(
  placeholder: '[ローカルな画像パス'],
  image:
      'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png',
),

이미지 링크는 필요에 따라 인용되었습니다.Image.network , FadeInImage.assetNetwork , FadeInImage.memoryNetwork 로 어떤 바람에 다른지 만들어 보았습니다.


Image.network가로드 된 후 확실히 표시됩니다.FadeInImage.assetNetwork 는 로컬 이미지가 페이드 아웃된 후 로드된 이미지가 페이드 인됩니다.FadeInImage.memoryNetwork 는 아무것도 없는 화면에서 불러온 이미지가 페이드 인됩니다.

마지막으로

일단 샘플의 소스 코드입니다.

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

class SampleFadeImage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SampleFadeImage();
}

class _SampleFadeImage extends State<SampleFadeImage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FadeImage'),
      ),
      body: Row(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                'Image.network',
              ),
              Text('FadeInImage.\nassetNetwork'),
              Text('FadeInImage.\nmemoryNetwork'),
            ],
          ),
          Column(
            children: [
              Expanded(
                child: Image.network(
                    'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'),
              ),
              Expanded(
                child: FadeInImage.assetNetwork(
                    placeholder: 'images/sample6.png',
                    image:
                        'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'),
              ),
              Expanded(
                child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage, //transparent_image
                    image:
                        'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'),
              )
            ],
          ),
        ],
      ),
    );
  }
}