Flutter imitates airbnb's price range filter. (II)

Introduce

Flutter - Imitation Airbnb Price range filter for .（ One ）

Flutter - Imitation Airbnb Price range filter for .（ Two ）

Flutter-CustomPaint Drawing Bezier curve chart ( 3、 ... and )

The overall structure

I try to write the introduction into the notes , In this way, it is more convenient to read and understand the code .

 Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  width: rootWidth,
                  height: rootHeight*0.45,
                  child: Stack(
                    children: <Widget>[
                      //bottom chart  Bottom   background chart
                      buildLineChart(),
                      //above chart   The upper   chart
                      
                      ClipPath(
                        clipper: ChartClipPath(Size(30,20),// It can be based on the design drawing or through key Pass it on , It's convenient here 
                            leftSlideImageOffset, rightSlideImageOffset),
                        child: buildLineChart(),
                      ),
                    ],
                  ),
                ),

                ///  Price slider widget
                Positioned(
                  bottom: 10,
                  child: SliderPrice(list: beanList,rootWidth: rootWidth,rootHeight: rootHeight * 0.4,
                    leftSlidListener: (dragging,index,leftImageKey){
                      //debugPrint("left ------- $dragging ------- $index");
                      leftSlideImageOffset = calculateSlideBlockInfo(leftImageKey);
                      setState(() {

                      });
                    },
                    rightSlidListener: (dragging,index,rightImageKey){
                      //debugPrint("right ------- $dragging ------- $index");
                      rightSlideImageOffset = calculateSlideBlockInfo(rightImageKey);
                      setState(() {

                      });
                    },),
                ),
                ///


              ],
            )

ClipPath

You can see here I used ClipPath On the upper chart We have a package , By passing in a Clipper（ Inherit CustomClipper） Yes, yes widget Tailoring .
In addition, the official also provided ClipOval、ClipRect、ClipRRect To facilitate the round 、 Cutting of rounded corners, rectangles, etc .

Customize Clipper Two methods need to be overridden ：

1,getClip(Size size), Parameters size It's the father widget Give us the maximum size . In this method we can define path And edit at will , Then go back , Will eventually act on the child widget.

2,shouldReclip（）,widget(element) Whether to redraw when refreshing , Here we go back to true.

ChartClipPath Code ：

class ChartClipPath extends CustomClipper<Path>{
    // Slider button size 
  Size slideBlockSize;
  // Position of left and right sliders 
  Offset leftBlockOffset,rightBlockOffset;


  ChartClipPath(this.slideBlockSize, this.leftBlockOffset,
      this.rightBlockOffset);
// For some adaptation reasons , Add a... Here ratio Easy to adjust , In fact, if you have enough time , Write slowly to discard this variable completely ... There is no way to hurry 
  final double ratio =0.45;

  @override
  Path getClip(Size size) {
    var path = Path();
    // Avoid some values being empty when drawing the first stitch , So do not cut 
    if(slideBlockSize == null || leftBlockOffset == null || rightBlockOffset == null){
      path.moveTo(0, 0);
      path.lineTo(0,size.height);
      path.lineTo(size.width, size.height);
      path.lineTo(size.width, 0);
      path.close();
      return path;
    }

    // It's very simple here , Actually, it depends on the position of the left and right slider buttons , Walk a rectangle path, Then it is used for cutting 
    // Pay attention here moveTo Method , for example A To B There is no path Generated 
    //  and  lineTo The method is to generate path Of .
    //path There are many sub methods , Bessel curve is also drawn here , In fact, it is very similar to Android native .
    // The starting point 
    path.moveTo(leftBlockOffset.dx - slideBlockSize.width * ratio, 0);
    // Down 
    path.lineTo(leftBlockOffset.dx - slideBlockSize.width * ratio, leftBlockOffset.dy);
    // towards the right 
    path.lineTo(rightBlockOffset.dx - slideBlockSize.width * ratio, rightBlockOffset.dy);
    // Up 
    path.lineTo(rightBlockOffset.dx - slideBlockSize.width * ratio, 0);
    // Form a closure from the end point to the start point .（ This is a straight line, so make sure it's what you want ）
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {

    return true;
  }

}

The whole production is finished here .

The latter

These are just UI Drawing and functional interaction , In fact, in combination with business requirements , State handling is very complex , Mine is used in actual development provider Ongoing control , It is suggested that interested friends can learn about , Very convenient .( You can also try inheritedwidget,provider It is based on this implementation )

##DEMO

https://github.com/bladeofgod/chart_price_slider