The Flutter imitation nails punch

The specific effects of Flutter imitated studs are as follows

The development process

1. Set the click button style using Container() :

           Container(
                  height: 144.0,
                  width: 144.0,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(top: 40.0),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      ...
                   ),
                  child: Column(
                    children: [
                    ...
                    ],
                  ),
                )
Copy the code

2. Add text, text contains “punch” and current time (HH:mm:ss), add relevant text to children in Column 1:

                  child: Column(
                    children: [
                      Text(
                        "Clock",
                        style: TextStyle(
                          fontSize: 32.0,
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(
                        height: 4.0,
                      ),
                      Text(
                        time,
                        style: TextStyle(fontSize: 24.0, color: Colors.white),
                      ),
                    ],
                  ),
Copy the code

3. Set the gradient background, blue in the normal state and orange in the abnormal state. Add gradient in the BoxDecoration of Container 1:

                   gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          // 1 is normal; otherwise, it is abnormal
                          colors: type == 1
                              ? [
                                  Color(0xFF1DE0FA),
                                  Color(0xFF1376EE),
                                ]
                              : [
                                  Color(0xFFFFB164),
                                  Color(0xFFED6230),]),Copy the code

4. Set the shadow. Also add a boxShadow to the BoxDecoration of the Container in 1:

                 boxShadow: [
                        BoxShadow(
                            // Shadow offset
                            offset: Offset(0.40.0),
                             // 1 is normal; otherwise, it is abnormal
                            color: type == 1
                                ? Color(0xFF1376EE)
                                : Color(0xFFED6230),
                            // Projection blur degree
                            blurRadius: 36.0.// The projection diffuses outward when it is greater than 0, and is cohesive when it is less than 0
                            spreadRadius: -36.0),]),Copy the code

5. Set the radar scan style:

class RadarPainter extends CustomPainter {
  final doubleangle; Paint _paint = Paint().. style = PaintingStyle.fill; RadarPainter(this.angle);

  @override
  void paint(Canvas canvas, Size size) {
    var radius = min(size.width / 2, size.height / 2);
    // Set scan line style, white, opacity from 0.01 to 0.5, Angle PI /9=20°
    _paint.shader = ui.Gradient.sweep(
        Offset(size.width / 2, size.height / 2),
        [
          Colors.white.withOpacity(0.01),
          Colors.white.withOpacity(0.1),
          Colors.white.withOpacity(0.2),
          Colors.white.withOpacity(0.3),
          Colors.white.withOpacity(0.4),
          Colors.white.withOpacity(0.5)], [0.0.0.2.0.4.0.6.0.8.1.0],
        TileMode.clamp,
        . 0,
        pi / 9);

    canvas.save();
    // Sweep the Angle to draw calculation
    double r = sqrt(pow(size.width, 2) + pow(size.height, 2));
    double startAngle = atan(size.height / size.width);
    Point p0 = Point(r * cos(startAngle), r * sin(startAngle));
    Point px = Point(r * cos(angle + startAngle), r * sin(angle + startAngle));
    canvas.translate((p0.x - px.x) / 2, (p0.y - px.y) / 2);
    canvas.rotate(angle);

    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2), radius: radius),
        0,
        pi / 9.true,
        _paint);
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true; }}Copy the code

6. Radar scanning belongs to animation, the animation will be displayed when the button is clicked, and the animation will be hidden after successful clocking, and relevant animation will be set:

		// Animation controller initialization
   		 radarController = AnimationController(duration: const Duration(seconds: 1), vsync: this);
   		 radarController.addStatusListener((status) {
     		 if (status == AnimationStatus.completed) {
       			 isShowRadar = false; }}); animation = Tween(begin:. 0, end: pi * 2).animate(radarController); . Visibility( visible: isShowRadar, child: AnimatedBuilder( animation: animation, builder: (context, child) {return Container(
                            height: 144.0,
                            width: 144.0, child: CustomPaint( painter: RadarPainter(animation.value), ), ); }),),.../ / destroy
                @override
 		 void dispose(a) {
                   radarController.dispose();
                  super.dispose();
                  }
Copy the code

7. Assemble, the radar animation shall be covered on the drawn punch button, and the punch button shall have the clicking function:

    GestureDetector(
            onTap: () => onTapSign(),
            child: Stack(
              children: [
                // 1Container(...) .// Scan radar
                radar,
                ]
               )
            )
Copy the code