【Flutter】【FadeInImage】画像をURL(network)から表示するときの見せ方

## まえがき
URL(network)から画像を表示するとき、一番簡単なのは、`Image.network()`で表示できます。

ただ`FadeInImage`を使えばまた違った表示ができそうです。
読み込みの時間に、どんなものを表示するか選べるらしいのでサンプルを作ってみました。

## FadeInImage
`FadeInImage`は`FadeInImage.assetNetwork`と`FadeInImage.memoryNetwork`の2種類あります。
- `FadeInImage.assetNetwork`はURLの画像を表示する前はローカルに保存している画像を表示
- `FadeInImage.memoryNetwork`はメモリに保存されている画像を使用する
らしい

## `FadeInImage.memoryNetwork`を使用するとき
`FadeInImage.memoryNetwork`を使用するときは、[transparent_image](https://pub.dev/packages/transparent_image)というパッケージを使用します。

このパッケージは`kTransparentImage`という`placeholder`を設定できるようになります。

これでURLの画像を表示するとき、透明なWidgetから画像がフェードインしてくる挙動になります。
（だんだんと見えてくる感じ）

## 使い方
使い方はこんな感じです。

`FadeInImage.memoryNetwork`

```dart
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(`

```dart
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`でどういう風に違うのか作ってみました。


![FadeInImage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311390/b6ddd24a-38c6-fc80-bae6-8c1277a3d9dc.gif)

`Image.network`は読み込んでからパッと表示されますね
`FadeInImage.assetNetwork`は、ローカルの画像がフェードアウトされてから読み込んだ画像がフェードインしてきます
`FadeInImage.memoryNetwork`は何もない画面から、読み込んだ画像がフェードインしてきます


## 最後に
一応サンプルのソースコードです

```dart
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'),
              )
            ],
          ),
        ],
      ),
    );
  }
}
```