Flutter - Simple implementation to find girls to customize the view

Flutter – Simple implementation to find girls to customize the view

Kotlin saw someone implement it today. Today I’m going to implement it with Flutter

1. As usual, draw the picture first

2. What you need to know

1. AnimationController

2. Customize the View class CustomPaint

3. The analysis of the view

Basic idea:

1. First there must be a circular head in the center. Consider ClipOval for this.

2. Circular avatars have zooming in and out animations. Consider using AnimationController to control the width and height of the avatars

3. Draw a circle with the center of your head as the center of the circle, taking into account the changing radius and the changing opacity of the brush color

First draw six circles of different sizes, with the same spacing of radii and decreasing transparency.

///Opacity can be changed by changing opacity
Color.fromRGBO(int r, int g, int b, double opacity) 

///Change the radius to draw circles of different sizes
drawCircle(Offset c, double radius, Paint paint) 

///Define brush
Paint _paint; _paint = newPaint() .. color = Color.fromRGBO(255.182.193, control.opac[i].toDouble());    
Copy the code

4. Code implementation

///Basic layout

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: Stack(
        children: [
          CustomPaint(
            foregroundPainter: PaintGirls(control),
          ),
          Container(
            child: ClipOval(
                child: Image(
                  image: NetworkImage(
                      "Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=398732417, & FM = 26 & gp = 0. 1147058696 JPG"),
                  width:  _animationController.value,
                  height:  _animationController.value,
                  fit: BoxFit.cover,
                )
            ),
              ///Here the head zooms in and out, and the margins change accordingly
            margin: EdgeInsets.only(left: 90-_animationController.value/2,top: 90-_animationController.value/2() [() [() [() }Copy the code

class FindGirlsControl extends GetxController{
  var size= [20.30.40.50.60.70].toList().obs;
  var opac= [1.0.84.0.68.0.52.0.36.0.2].toList().obs;
}
Copy the code

///animation

AnimationController _animationController;
  final FindGirlsControl control = Get.put(FindGirlsControl());
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    const oneSec = const Duration(milliseconds: 75); // The interval is 1 second
    Timer qrtimer = new Timer.periodic(oneSec, (timer) {
      _change();
    });

    ///Heads vary in width and height from 40 to 60
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        lowerBound: 40.0,
        upperBound: 60.0,
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    ///The animation is repeated and played in reverse
    _animationController.repeat(reverse: true);
  }

  ///Varying the radius and transparency of different circles
  void _change() {
    for(int i=control.size.length- 1; i>=0; i--){if(control.size[i]<=80) {
        control.size[i] += 1;
        control.opac[i] = control.opac[i] - 0.016;
        if(control.opac[i]<0){
          control.opac[i]=0;
        }
        if(control.size[i]==80){
          control.opac[i]=0; }}else{
        control.size[i]=20;
        control.opac[i]=1.0; }}}Copy the code

/ / draw circles
class PaintGirls extends CustomPainter{

  final FindGirlsControl control ;

  PaintGirls(this.control);


  @override
  void paint(Canvas canvas, Size sizes) {

    for(int i=0; i<control.size.length; i++){ Paint _paint; _paint =newPaint() .. color = Color.fromRGBO(255.182.193, control.opac[i].toDouble());
      canvas.drawCircle(Offset(90.90), control.size[i].toDouble(), _paint); }}@override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true; }}Copy the code

5. To summarize

The code is the same. Flutter is the same as Kotlin.

Life is too hard, still happy. Come on!

Flutter – Simple implementation to find girls to customize the view