1.輪播圖的實作

1.匯入依賴包

flutter_swiper: ^1.1.6

Flutter下載地址插件地址：Flutter插件下載地址
在里面搜索flutter_swing就可以獲取你需要的Flutter的插件

2.插入匯入地址

步驟如下：先點擊pubspec.yaml地址--->然后把依賴包添加到dependencies里面--->然后點擊pub get

3.使用輪播圖插件

具體細節就不在這里說明了，代碼里面對于主要代碼功能有決議，
分享一個用于上傳網路圖片的網站：ImgBB平臺，
個人感覺使用挺方便，最主要是免費，還有很多其他的功能，你可以自己去學習學習，

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

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //輪播圖圖片地址
  List _imageurls=[
    'https://i.ibb.co/ym2R1R7/child-river-dreams-127495-1920x1080.jpg',
    'https://i.ibb.co/FBp1LW8/girl-umbrella-rain-151317-1280x720.jpg',
    'https://i.ibb.co/Yk8C22T/wallhaven-2el5zg.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children:<Widget> [
            Container(
              height: 220,
              //使用Swiper輪播圖插件
              child: Swiper(
                itemCount: _imageurls.length,     //輪播圖的數量
                autoplay: true,                  //輪播圖滾動
                itemBuilder: (BuildContext context,int index){
                  //Image.network方法是匯入網路圖片
                  return Image.network(
                    _imageurls[index],  
                    fit: BoxFit.fill,   
                  );
                },
                pagination: SwiperPagination(),   //輪播圖的小圓點
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果如下：

2.自定義AppBar實作滾動漸變

1.部分代碼決議

用來去除頂部狀態欄

MediaQuery.removePadding(
    removeTop: true,  
)

用來檢測滾動距離

NotificationListener(
  // ignore: missing_return
  onNotification: (scrollNotification){
    if(scrollNotification is ScrollUpdateNotification &&
    scrollNotification.depth ==0){
      _onScroll(scrollNotification.metrics.pixels);
    }
  },
)

一個透明度組件，用來控制透明度

Opacity(
    opacity: appBarAlpha,
    child: Container(
      height: 60,
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Padding(padding: EdgeInsets.only(top: 20),
          child: Text('首頁'),),
      ),
    ),
  )

2.整體代碼

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET=150;

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageurls=[
    'https://i.ibb.co/ym2R1R7/child-river-dreams-127495-1920x1080.jpg',
    'https://i.ibb.co/FBp1LW8/girl-umbrella-rain-151317-1280x720.jpg',
    'https://i.ibb.co/Yk8C22T/wallhaven-2el5zg.jpg',
  ];

  double  appBarAlpha=0;
  _onScroll(offset){
    double alpha=offset/APPBAR_SCROLL_OFFSET;
    if(alpha<0){
      alpha=0;
    }else if(alpha>1){
      alpha=1;
    }
    setState((){
      appBarAlpha=alpha;
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children:<Widget> [
            MediaQuery.removePadding(
              removeTop: true,
              context: context,
              child: NotificationListener(
                // ignore: missing_return
                onNotification: (scrollNotification){
                  if(scrollNotification is ScrollUpdateNotification &&
                  scrollNotification.depth ==0){
                    _onScroll(scrollNotification.metrics.pixels);
                  }
                },
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 220,
                      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('Hello World'),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Opacity(
              opacity: appBarAlpha,
              child: Container(
                height: 60,
                decoration: BoxDecoration(color: Colors.white),
                child: Center(
                  child: Padding(padding: EdgeInsets.only(top: 20),
                    child: Text('首頁'),),
                ),
              ),
            )
          ],
        )
    );
  }
}

實作功能效果：