AnimatedCrossFade を使って、画像などをスムーズに切り替えて表示します。

使い方

まず、 2 つ画像を用意します。

final image0 = Image.network(
  'https://nzigen.com/flutter-reference/assets/img/samples/kit-jumper-0002.png',
  width: 180.0,
  height: 180.0,
);
final image1 = Image.network(
  'https://nzigen.com/flutter-reference/assets/img/samples/kit-jumper-0003.png',
  width: 180.0,
  height: 180.0,
);

ポイントとしては、 2 つの画像をなるべく決まった固定サイズで用意することです。 サイズが固定サイズでないと、表示する際に一緒にアニメーションしてしまうことがあります。

AnimatedCrossFade(
  firstChild: image0,
  secondChild: image1,
  duration: Duration(seconds: 1),
  crossFadeState: _crossFadeState,
)

などとします。

引数 firstChild に 1 枚目の画像、 secondChild に 2 枚目の画像を適応します。

そして、 duration には、切り替えの時間 Duration(seconds: 1) は 1 秒を意味します。 0.5 秒 (500 ミリ秒) にしたいときは、 Duration(milliseconds: 500) とします。

最後に、 Timer を使うことで、時間差で、 フェードイン・フェードアウトしながら、画像を切り替えることが可能です。 コードの例で、実際の使い方は確認してください。

コードの例

例えば、コードは以下のようになります。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CrossFadeState _crossFadeState = CrossFadeState.showFirst;
  Timer _crossFadeTimer;

  @override
  Widget build(BuildContext context) {
    final image0 = Image.network(
      'https://nzigen.com/flutter-reference/assets/img/samples/kit-jumper-0002.png',
      width: 180.0,
      height: 180.0,
    );
    final image1 = Image.network(
      'https://nzigen.com/flutter-reference/assets/img/samples/kit-jumper-0003.png',
      width: 180.0,
      height: 180.0,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(child: AnimatedCrossFade(
        firstChild: image0,
        secondChild: image1,
        duration: Duration(seconds: 1),
        crossFadeState: _crossFadeState,
      ),),
    );
  }

  @override
  void dispose() {
    if (_crossFadeTimer != null) {
      _crossFadeTimer.cancel();
      _crossFadeTimer = null;
    }
    super.dispose();
  }

  @override
  void initState() {
    _crossFadeTimer = Timer.periodic(Duration(seconds: 3), (timer) {
      setState(() {
        if (_crossFadeState == CrossFadeState.showFirst) {
          _crossFadeState = CrossFadeState.showSecond;
        } else {
          _crossFadeState = CrossFadeState.showFirst;
        }
      });
    });
    
    super.initState();
  }
}

スクリーンショット

3 秒ごとに画像が切り替わることが確認できるはずです。

参考リンク