zhiying_base_widget/lib/widgets/others/mine_header_bg_widget.dart

import 'dart:async';

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

class MineHeaderBgWidget extends StatefulWidget {
  @override
  _MineHeaderBgWidgetState createState() => _MineHeaderBgWidgetState();
}

class _MineHeaderBgWidgetState extends State<MineHeaderBgWidget> {
  int zIndex = 0;

//  List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00'];
  List<String> imageUrls = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=2aa824f43d4945dbeca31d5ccc587567&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=c082ab4b39f0bc45e8cad60447db4ae2&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=b7535e61ed661806647bf1070e74f883&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3204887199%2C3790688592%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D4610%26h%3D2968',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599627593136&di=3b381359676404f5e42f6a663a0139f1&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D3363001160%2C1163944807%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D830',
  ];
  Timer timer;

  //setInterval控制当前动画元素的下标，实现动画轮播
  autoPlay() {
    var second = const Duration(seconds: 2);
    timer = Timer.periodic(second, (t) {
      setState(() {
        zIndex = (++zIndex) % imageUrls.length;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    timer = Timer(Duration(seconds: 2), autoPlay);
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 300,
        width: double.infinity,
        child: Stack(
          children: imageUrls
              .asMap()
              .keys
              .map<Widget>((i) => AnimatedOpacity(
                    curve: Curves.easeIn,
                    duration: Duration(milliseconds: 1600),
                    opacity: i == zIndex ? 1 : 0,
                    child: Container(
//                          color: Color(int.parse(list[i], radix: 16))
//                              .withAlpha(255),
                      child: CachedNetworkImage(
                        imageUrl: imageUrls[i],
                      ),
                      height: 300, //100%
                    ),
                  ))
              .toList(),
        ));
  }
}