【Flutter旅游APP】自定AppBar实现轮播图渐变

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
const APPBAR_SCROLL_OFFSET = 100;
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageUrls = [
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g5/M00/0C/08/ChMkJl3XbhCIJSrqAAxizABaJN8AAvXUgBvTjYADGLk516.jpg',
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g2/M00/0A/0C/ChMlWl1UvBGIPMUQADWkWWYO9DcAAMkeAMR56YANaRx249.jpg',
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g5/M00/01/06/ChMkJ1on59WAVS6qATfERjoD4Lc410.jpg'
  ];
  double appBarFade = 0;

  _onScroll(offset) { //offset滚动距离
    double fade = offset/APPBAR_SCROLL_OFFSET;
    if(fade < 0){
      fade = 0;
    }else if(fade > 1){
      fade = 1;
    }
    setState(() {
      appBarFade = fade;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(
            removeTop: true, //移除顶部padding
            context: context,
            child: NotificationListener( //监听列表滚动
              // ignore: missing_return
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) { //第0个元素(Swiper)才触发该滚动监听*******
                  _onScroll(scrollNotification.metrics.pixels);
                }
              },
              child: ListView(//包裹在可上下滑动的列表
                children: <Widget>[
                  Container(
                    height: 190,
                    child: Swiper(
                      itemCount: _imageUrls.length, //轮播页个数
                      autoplay: true, //自动轮播
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          _imageUrls[index],
                          fit: BoxFit.fill,
                        );
                      },
                      pagination: SwiperPagination(), //页码指示器
                    ),
                  ),
                  Container(
                    height: 800,
                    child: ListTile(
                      title: Text('首页'),
                    ),
                  )
                ],
              ),
            ),
          ),
          Opacity(
            opacity: appBarFade,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.white),
            ),
          )
        ],
      ),
    );
  }
}