flutter-制作淡入淡出的Banner切换Fade效果

1. 介绍

本节主要介绍如何制作一个淡入淡出的 Fade 过渡 Banner 切换。Fade 过渡通常指的是当元素（如图片、文本框等）显示或隐藏时，元素的透明度会逐渐变化，从而实现平滑的视觉过渡效果。这种效果可以提升用户的体验，使得页面的交互更加自然和流畅。

• 效果图

2. 例子

• main.dart

import 'package:xxx/fadeBanner.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FadeBannerWidget()
    );
  }
}

• fadeBanner.dart

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

class FadeBannerWidget extends StatefulWidget {
  const FadeBannerWidget({super.key});

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

class FadeBannerWidgetState extends State<FadeBannerWidget>
    with SingleTickerProviderStateMixin {
  /// 图片列表
  final List<String> imageList = [
    'https://xxxxx.jpg',
    'https://xxxxx.jpg'
  ];

  /// Fade持续时长
  static const fadeDuration = Duration(milliseconds: 300);

  /// Banner切换时长
  static const bannerDuration = Duration(milliseconds: 3000);

  /// 当前图片索引
  int currentImageIndex = 0;

  /// 动画控制器
  late AnimationController animeController;

  /// 图片定时器
  late Timer imageTimer;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器
    animeController = AnimationController(vsync: this, duration: fadeDuration);
    // 动画发射
    animeController.forward();
    // 初始化图片定时器
    imageTimer = Timer.periodic(bannerDuration, (_) {
      currentImageIndex = (currentImageIndex + 1) % imageList.length;
      setState(() {});
    });
  }

  @override
  void dispose() {
    animeController.dispose();
    imageTimer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            alignment: Alignment.center,
            color: const Color(0xFF3F3F3F),
            child: AnimatedSwitcher(
                duration: bannerDuration,
                child: FadeTransition(
                    opacity: animeController,
                    key: ValueKey<int>(currentImageIndex),
                    child: Image.network(imageList[currentImageIndex])))));
  }
}

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
• flutter学习-day1-环境搭建和启动第一个项目
• flutter学习-day12-可滚动组件和监听
• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金