Nsryjdtyk

I want cut a section of image, and move the clip with Slider. But I found it strange that the clip size is the same as image. How can i only get the clip?

in the screenshot, above is original image, below is clip from the image, but their size is the same. I want get the circle section.

screenshot:

here is code:

void main() => runApp(MyApp());



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Startup Name Generator',

      home: Test2(),

    );

  }

}



class Test2 extends StatefulWidget {

  @override

  _Test2State createState() => _Test2State();

}



class _Test2State extends State<Test2> {

  final String imageFile = "images/snow.jpg";



  double dy = 100;

  double size = 20;

  double blockCenterX = 250;

  double width = 300;

  double height = 300;

  Widget blockWidget;



  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    _changeBlockImage();

  }



  @override

  Widget build(BuildContext context) {

    print("screen width: $width");

    return Scaffold(

      appBar: AppBar(

        title: Text("ClipPath test"),

      ),

      body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [

        Container(

          width: width,

          height: height,

          decoration: BoxDecoration(

              image: DecorationImage(

                  image: AssetImage(imageFile), fit: BoxFit.fill)),

        ),

        Container(

          color: Colors.yellow,

          child: blockWidget,

        )

      ]),

    );

}



  _changeBlockImage() {

    setState(() {

      blockWidget = _getBlock();

    });

  }



  Widget _getBlock() {

    _resetBlockOffset();

    return Stack(children: [

      ClipPath(

        clipper: BlockClipper(

          origin: Offset(blockCenterX, dy),

          blockSize: Size(size, size),

        ),

        child: Container(

          width: width,

          height: height,

          decoration: BoxDecoration(

              image: DecorationImage(

            image: AssetImage(imageFile),

            fit: BoxFit.fill,

          )),

        ),

      ),

      CustomPaint(

        painter: BorderPaint(

          origin: Offset(blockCenterX, dy),

          radius: size,

        ),

        child: SizedBox(

          width: width,

          height: height,

        ),

      )

    ]);

  }

}



class BorderPaint extends CustomPainter {

  Offset origin;

  double radius;

  BorderPaint({this.origin, this.radius});



  @override

  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()

      ..color = Colors.blue

      ..strokeWidth = 2

      ..style = PaintingStyle.stroke;



    canvas.drawCircle(origin, radius, paint);

  }



  @override

  bool shouldRepaint(BorderPaint old) {

    return true;

  }

}