The first thing to consider is not how to write a custom AppBar, but how this function is used!

Let’s take a look at the effect picture to deepen memory:

Rendering (1.1) :

Analysis of knowledge points:

• The default value of AppBar displayed on the Banner is 0. According to this statement, the Stack() component is required to make AppBar superimposed on the Banner, and Opacity is changed using Opacity()
• For slide listeners, which change transparency when sliding, slide listeners use NotificationListener()
• Since AppBar is at the top, bangs should also be considered

Rendering (1.2) :



Now, as long as you do these steps, you’re pretty much done, right

Step 1: Let him slide first

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        /** * Stack Stack layout is equivalent to Android Fragment */
        body: ListView(
              children: [
                /** * Bunner */
                initBanner(),
                Container(
                  height: 400,
                  color: Colors.yellow,
                ),
                Container(
                  height: 400,
                  color: Colors.red,
                ),
                Container(
                  height: 400,
                  color: Colors.yellow,
                )
              ],
            )
         );
  }
Copy the code

This code is very simple, just look at the effect:

Rendering (1.3)



From this picture, we can see that there is also a gap on the Banner, which is the gap of the status bar. However, we did not set this property in the code, and the padding value is added by default. Next, I will introduce two methods to solve this problem:

Padding-top: EdgeInsets. Only (Top: 0)

@override
  Widget build(BuildContext context) {
    return Scaffold(
        /** * Stack Stack layout is equivalent to Android Fragment */
        body:
            ListView(
              padding: EdgeInsets.only(top: 0),
              children: [
				.....
				]
              
        );
  }
Copy the code

Method 2: Use mediaQuery. removePadding to set the removeTop parameter to true

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        /** * Stack Stack layout is equivalent to Android Fragment */
        body: 
      		  /** * mediaQuery. removePadding is used to create the top Padding */
        MediaQuery.removePadding(
            //MediaQuery Mandatory parameter
            context: context,
            //MediaQuery Mandatory parameter
            removeTop: true, child: ListView( children: [ ...... ] ,))); }Copy the code

The renderings of method 1 and Method 2 are the same: Renderings (1.4)

In this way, the top Banner is completely overlapped with the top, and even the bangs are the same effect

Next use the NotificationListener() component to scroll on the listener

Note write very clear, do not repeat say ~

  double _mAlpha = 0;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      /** * Stack Stack layout is equivalent to Android Fragment */
        body: 
            /** * mediaQuery. removePadding is used to create the top Padding */
            MediaQuery.removePadding(
              //MediaQuery Mandatory parameter
              context: context,
              //MediaQuery Mandatory parameter
              removeTop: true./** *NotificationListener is used to listen for the list to scroll */
              child: NotificationListener(
                onNotification: (notification) {
                  /** * notification is ScrollUpdateNotification. Depth == 0 Listen only for ListView swiping
                  if (notification is ScrollUpdateNotification &&
                      notification.depth == 0) {
                    / * * * notification. The metrics. Slide pixels pixels * * because only accept transparency 0 and 1 0 completely transparent 1 completely opaque So / 100 * /
                    double d = notification.metrics.pixels / 100.0;
                    if (d < 0) {
                      d = 0;
                    } else if (d > 1) {
                      d = 1; } setState(() { _mAlpha = d; }); } }, child: ListView( children: [ ...... ] (), (), (), (); }Copy the code

The _mAlpha here is the value of transparency

Next, use the Stack() component to overlay the layout, using the AppBar on top of the Banner, and setting the Opacity value using the Opacity() component

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      /** * Stack Stack layout is equivalent to Android Fragment */
        body: Stack(
          children: [
            /** * mediaQuery. removePadding is used to create the top Padding */
            MediaQuery.removePadding(
              //MediaQuery Mandatory parameter
              context: context,
              //MediaQuery Mandatory parameter
              removeTop: true./** *NotificationListener is used to listen for the list to scroll */
              child: NotificationListener(
                onNotification: (notification) {
                  /** * notification is ScrollUpdateNotification. Depth == 0 Listen only for ListView swiping
                  if (notification is ScrollUpdateNotification &&
                      notification.depth == 0) {
                    / * * * notification. The metrics. Slide pixels pixels * * because only accept transparency 0 and 1 0 completely transparent 1 completely opaque So / 100 * /
                    double d = notification.metrics.pixels / 100.0;
                    if (d < 0) {
                      d = 0;
                    } else if (d > 1) {
                      d = 1;
                    }
                    setState(() {
                      _mAlpha = d;
                    });
                  }
                },
                child: ListView(
                  children: [
                    /** * Bunner */initBanner(), ...... ] , ), ), ), Opacity( opacity: _mAlpha, child: Container( height:60,
                decoration: BoxDecoration(color: Colors.white),
                child: Center(
                  child: Text("Home page"(() [() [() [() [() }Copy the code

Check out the results:

Effect: (1.5) :



The complete code

Previous Chapter :Flutter Hero Animation (2.6)

Next chapter :Flutter Http Network Requests (3.2)

Original is not easy, your thumbs up is my biggest support, leave your thumbs up ~