[shutter] monitor the transparency gradient of the scrolling action control component (remove the blank of the top status bar | frame layout component | transparency component | monitor the scrolling

Preface

In the last blog 【Flutter】Banner Carousel components ( flutter_swiper plug-in unit | Swiper Components ) On the basis of development ;

One 、 Remove the top status bar blank

---

stay Flutter Above the interface , There is a status bar by default , Display time , Electric quantity , The Internet , Signal strength and other information , The status bar is translucent ;

have access to MediaQuery The component removes the blank part of the top status bar ;

call MediaQuery.removePadding Method , The first parameter context Set to BuildContext context , The second parameter child Set to the original component ;

Code before modification :

  @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: Center(),    );  }

The modified code : In the following code removeTop: true Is the key , Represents removing the blank at the top ;

  @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Centering component       body: MediaQuery.removePadding(      	  removeTop: true,          context: context,          child: Center(),),    );  }

Effect after removing the top blank : The above is just a brief code example , See the final example for the complete code ;

Two 、 Frame layout component

---

To realize the frame layout style, you need to use Stack Components , The front components are in the lower layer , The rear components are on the upper layer ;

  @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Frame layout component  ,  The front element is in the lower layer  ,  The latter element is on the upper layer       body: Stack(        children: <Widget>[          ///  Eliminate blank components at the top           MediaQuery.removePadding(),          ///  Transparency variable component           Opacity(),        ],      ),    );  }

Above settings , Implemented in the Swiper Above the component Text Components , also Text Component covered Swiper Components ;

3、 ... and 、 Transparency component

---

Opacity The component can control the transparency change of the component , modify opacity attribute , You can change the transparency effect of components , 0 It's completely transparent , 1 It's completely opaque ;

          ///  Transparency variable component           Opacity(            opacity: appBarAlpha,            child: Container(              height: 80,              decoration: BoxDecoration(color: Colors.white),              child: Center(                child: Padding(                  padding: EdgeInsets.only(top: 20),                  child: Text(" Title transparent gradient "),                ),              ),            ),          ),

Four 、 Listen for rolling events

---

NotificationListener Components can listen for scrolling events ;

stay onNotification Property to set the listening event , Pass in a NotificationListenerCallback Method of type , The method parameter is ScrollNotification Type of ;

Specify the component to listen to : scrollNotification.depth == 0 The depth is 0 The elements of , namely ListView When elements scroll , To trigger scrolling ;

call scrollNotification.metrics.pixels Get the scrolling distance ; The rolling distance is 0 ~ 100 Between time , Transparency component transparency from 0 ~ 1 change , If the rolling distance >= 100 , Then the transparency component is 1 , If the rolling distance is less than 0 , Then the transparency is 0 ;

Be careful : After the final setting , call setState Method , to update UI ;

Code example :

            NotificationListener(              //  Method of monitoring scrolling               onNotification: (scrollNotification){ 
                    // scrollNotification.depth == 0  The depth is  0  The elements of                 //  namely  ListView  When elements scroll  ,  To trigger scrolling                 if(scrollNotification is ScrollUpdateNotification &&                    scrollNotification.depth == 0) { 
                      //  from  scrollNotification  Get scroll parameters                   print(" Rolling distance  ${scrollNotification.metrics.pixels}");                  //  The rolling distance is  0 ~ 100  Between time                   //  Transparency component transparency from  0 ~ 1  change                   //  If the rolling distance  >= 100 ,  Then the transparency component is  1                  double alpha = scrollNotification.metrics.pixels / 100.0;                  //  The treatment is less than  0  and   Greater than  1  In extreme cases                   //  If only in  0 ~ 1  Between  ,  Don't deal with it                   if (alpha < 0) { 
                        alpha = 0;                  } else if (alpha > 1) { 
                        alpha = 1;                  }                  //  to update  UI  data                   setState(() { 
                        appBarAlpha = alpha;                  });                }              },              child: ListView(                children:               ),            ),

5、 ... and 、 Complete code example

---

import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';///  Application main interface class HomePage extends StatefulWidget { 
      @override  _HomePageState createState() => _HomePageState();}class _HomePageState extends State<HomePage> { 
      List _imageUrls = [    "https://img-blog.csdnimg.cn/20210401205234582.png",    "https://img-blog.csdnimg.cn/20210401205307863.png",    "https://img-blog.csdnimg.cn/20210401205249606.png"  ];  ///  Transparency of the top-level transparency component   double appBarAlpha = 0;  @override  Widget build(BuildContext context) { 
        ///  Interface framework     return Scaffold(      ///  Frame layout component  ,  The front element is in the lower layer  ,  The latter element is on the upper layer       body: Stack(        children: <Widget>[          ///  Eliminate blank components at the top           MediaQuery.removePadding(            removeTop: true,            context: context,            //  Use  NotificationListener  Components  ,  Listen to the scrolling of the list             child: NotificationListener(              //  Method of monitoring scrolling               onNotification: (scrollNotification){ 
                    // scrollNotification.depth == 0  The depth is  0  The elements of                 //  namely  ListView  When elements scroll  ,  To trigger scrolling                 if(scrollNotification is ScrollUpdateNotification &&                    scrollNotification.depth == 0) { 
                      //  from  scrollNotification  Get scroll parameters                   print(" Rolling distance  ${scrollNotification.metrics.pixels}");                  //  The rolling distance is  0 ~ 100  Between time                   //  Transparency component transparency from  0 ~ 1  change                   //  If the rolling distance  >= 100 ,  Then the transparency component is  1                  double alpha = scrollNotification.metrics.pixels / 100.0;                  //  The treatment is less than  0  and   Greater than  1  In extreme cases                   //  If only in  0 ~ 1  Between  ,  Don't deal with it                   if (alpha < 0) { 
                        alpha = 0;                  } else if (alpha > 1) { 
                        alpha = 1;                  }                  //  to update  UI  data                   setState(() { 
                        appBarAlpha = alpha;                  });                }              },              child: ListView(                children: <Widget>[                  Container(                    ///  Set up  Banner  Shuffling figure  160  Pixels                     height: 160,                    ///  This is a  flutter_swiper  Rotation diagram of plug-in                     child: Swiper(                      ///  Number of carousels                       itemCount: _imageUrls.length,                      ///  Set the rotation chart to play automatically                       autoplay: true,                      ///  Carousel entry component                       itemBuilder: (BuildContext context, int index) { 
                            return Image.network(                          ///  picture  URL  link                           _imageUrls[index],                          ///  Zoom mode                           fit: BoxFit.fill,                        );                      },                      ///  Carousel indicator                       pagination: SwiperPagination(),                    ),                  ),                  Container(                    height: 800,                    child: ListTile(                      title: Text(" Title transparent gradient "),                    ),                  ),                ],              ),            ),          ),          ///  Transparency variable component           Opacity(            opacity: appBarAlpha,            child: Container(              height: 80,              decoration: BoxDecoration(color: Colors.white),              child: Center(                child: Padding(                  padding: EdgeInsets.only(top: 20),                  child: Text(" Title transparent gradient "),                ),              ),            ),          ),        ],      ),    );  }}

Execution results :

6、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
• GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
• Flutter Practical e-books : https://book.flutterchina.club/chapter1/

Important topics :

• Flutter Animation reference documentation : https://flutterchina.club/animations/

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_app ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/21515304 ( The source code snapshot of this blog , You can find the source code of this blog )