1. Implementation of round-cast graph

1. Import the dependency package

Flutter_swiper: ^ 1.1.6Copy the code

Download download of FlutterDownload the Flutter pluginSearch for Flutter_swing to get the Flutter plugin you need

2. Insert the import address

The steps are as follows:Yaml address -> add the dependencies to dependencies -> pub Get

3. Use the wheel map plug-in

The details are not explained here, but the main code functions are parsed in the code. ImgBB: Share a website for uploading web images. Personally feel very convenient to use, the most important is free, there are many other functions, you can learn to learn by yourself.

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

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

class _HomePageState extends State<HomePage> {
  // The image address of the rotation map
  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.// Use the Swiper plugin
              child: Swiper(
                itemCount: _imageurls.length,     // The number of rotations
                autoplay: true.// Scroll around
                itemBuilder: (BuildContext context,int index){
                  // the Image.network method is to import the network image
                  return Image.network(
                    _imageurls[index],  
                    fit: BoxFit.fill,   
                  );
                },
                pagination: SwiperPagination(),   // Small dots in the rotation chart() [() [() [() [() }}Copy the code

The effect is as follows:

2. Customize AppBar to achieve rolling gradient

1. Partial code parsing

Used to remove the top status bar

MediaQuery.removePadding(
    removeTop: true.)Copy the code

Used to detect rolling distance

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

A transparency component that controls transparency

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

2. Overall code

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(a) => _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('home'),),),),),)); }}Copy the code

Achieve functional effects: