添加积分中心

lib/pages/personal/intergral/integral_center_page.dart

@@ -1,4 +1,5 @@
 import 'package:aku_new_community/gen/assets.gen.dart';
+import 'package:aku_new_community/pages/personal/intergral/progress_paint.dart';
 import 'package:aku_new_community/widget/bee_back_button.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -13,6 +14,17 @@ class integralCenterPage extends StatefulWidget {
 }
 
 class _integralCenterPageState extends State<integralCenterPage> {
+  double _proportion = 0.3;
+
+  @override
+  void initState() {
+    Future.delayed(Duration(milliseconds: 5000), () async {
+      _proportion = 0.5;
+      setState(() {});
+    });
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     var gridview = Container(
@@ -47,7 +59,7 @@ class _integralCenterPageState extends State<integralCenterPage> {
       child: Container(
         color: Color(0xFF303843),
         width: double.infinity,
-        height: 1000.w,
+        height: 850.h,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -79,7 +91,7 @@ class _integralCenterPageState extends State<integralCenterPage> {
         title: RichText(
             text: TextSpan(children: [
           WidgetSpan(
-            child: Assets.icons.vipFont.image(height: 45.w),
+            child: Assets.icons.vipFont.image(height: 32.w),
           ),
           TextSpan(
               text: ' 积分中心',
@@ -120,6 +132,7 @@ class _integralCenterPageState extends State<integralCenterPage> {
                 child: Material(
                   color: Colors.white,
                   borderRadius: BorderRadius.circular(24.w),
+                  clipBehavior: Clip.antiAlias,
                   child: Container(
                     width: 686.w,
                     height: 343.w,
@@ -132,38 +145,54 @@ class _integralCenterPageState extends State<integralCenterPage> {
                               Color(0xD9FBB246),
                               Color(0xE6FF7145),
                             ])),
-                    child: Padding(
+                    child: Column(
-                      padding: EdgeInsets.all(32.w),
+                      children: [
-                      child: Row(
+                        Padding(
-                        children: [
+                          padding: EdgeInsets.only(
-                          Column(
+                              left: 32.w, top: 32.w, right: 32.w),
-                            crossAxisAlignment: CrossAxisAlignment.start,
+                          child: Row(
                             children: [
-                              '活跃度'.text.size(28.sp).white.make(),
+                              Column(
-                              24.w.heightBox,
+                                crossAxisAlignment: CrossAxisAlignment.start,
-                              '2501'.text.size(56.sp).white.make(),
+                                children: [
+                                  '活跃度'.text.size(28.sp).white.make(),
+                                  24.w.heightBox,
+                                  '2501'.text.size(56.sp).white.make(),
+                                ],
+                              ),
+                              48.w.widthBox,
+                              Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  '积分'.text.size(28.sp).white.make(),
+                                  24.w.heightBox,
+                                  '123'.text.size(56.sp).white.make(),
+                                ],
+                              ),
+                              Spacer(),
+                              Column(
+                                crossAxisAlignment: CrossAxisAlignment.end,
+                                children: [
+                                  '积分获取比例'.text.size(28.sp).white.make(),
+                                  24.w.heightBox,
+                                  '5%'.text.size(56.sp).white.make(),
+                                ],
+                              )
                             ],
                           ),
-                          48.w.widthBox,
+                        ),
-                          Column(
+                        Spacer(),
-                            crossAxisAlignment: CrossAxisAlignment.start,
+                        Container(
-                            children: [
+                          width: double.infinity,
-                              '积分'.text.size(28.sp).white.make(),
+                          height: 110.w,
-                              24.w.heightBox,
+                          alignment: Alignment.center,
-                              '123'.text.size(56.sp).white.make(),
+                          child: ProgressPaint(
-                            ],
+                            activity: 300,
+                            lowLevel: 1,
+                            proportion: _proportion,
                           ),
-                          Spacer(),
+                        )
-                          Column(
+                      ],
-                            crossAxisAlignment: CrossAxisAlignment.end,
-                            children: [
-                              '积分获取比例'.text.size(28.sp).white.make(),
-                              24.w.heightBox,
-                              '5%'.text.size(56.sp).white.make(),
-                            ],
-                          )
-                        ],
-                      ),
                     ),
                   ),
                 )),

lib/pages/personal/intergral/progress_paint.dart

@@ -0,0 +1,52 @@
+import 'package:aku_new_community/painters/progress_bar_painter.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:velocity_x/velocity_x.dart';
+
+class ProgressPaint extends StatelessWidget {
+  final double proportion;
+  final int activity;
+  final int lowLevel;
+
+  const ProgressPaint(
+      {Key? key,
+      required this.proportion,
+      required this.activity,
+      required this.lowLevel})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        Container(
+          width: double.infinity,
+          height: 110.w,
+          alignment: Alignment.center,
+          child: CustomPaint(
+            painter:
+                ProgressBarPainter(proportion: proportion, lowLevel: lowLevel),
+          ),
+        ),
+        Positioned(
+          left: 180.w,
+          bottom: 16.w,
+          child: Container(
+            alignment: Alignment.center,
+            padding: EdgeInsets.symmetric(horizontal: 22.w, vertical: 12.w),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(38.w),
+              color: Color(0x000000).withOpacity(0.2),
+            ),
+            child: '距离下一级还有 ${activity} 活跃度'
+                .text
+                .size(22.sp)
+                .color(Colors.white)
+                .make(),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/painters/progress_bar_painter.dart

@@ -0,0 +1,84 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class ProgressBarPainter extends CustomPainter {
+  final double proportion;
+  final int lowLevel;
+
+  ProgressBarPainter({
+    required this.proportion,
+    required this.lowLevel,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final startAngle = pi * 1.42;
+    final sweepAngle = pi * 0.03;
+    final animateAngle = pi * 0.1 * proportion;
+    final Gradient gradient = new SweepGradient(
+      startAngle: startAngle,
+      endAngle: startAngle + sweepAngle,
+      colors: [
+        Colors.white.withOpacity(0.0),
+        Colors.white,
+      ],
+    );
+    final Gradient endGradient = new SweepGradient(
+      startAngle: startAngle + sweepAngle + pi * 0.1,
+      endAngle: startAngle + sweepAngle + pi * 0.1 + sweepAngle,
+      colors: [
+        Colors.black.withOpacity(0.4),
+        Colors.black.withOpacity(0),
+      ],
+    );
+    var center = Offset(size.width / 2, 700 - 30);
+    final Rect rect = Rect.fromCircle(center: center, radius: 700);
+    final foregroundPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = Colors.white
+      ..strokeCap = StrokeCap.round
+      ..shader = gradient.createShader(rect)
+      ..strokeWidth = 10.w;
+    final backPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round
+      ..color = Colors.black.withOpacity(0.4)
+      ..strokeWidth = 10.w;
+    canvas.drawArc(rect, startAngle, sweepAngle, false, foregroundPaint);
+    canvas.drawArc(rect, startAngle + sweepAngle, pi * 0.1, false, backPaint);
+    canvas.drawCircle(
+        Offset(-110, -21), 12.w, foregroundPaint..style = PaintingStyle.fill);
+    canvas.drawArc(rect, startAngle + sweepAngle, animateAngle, false,
+        foregroundPaint..style = PaintingStyle.stroke);
+    canvas.drawArc(rect, startAngle + sweepAngle + pi * 0.1, sweepAngle, false,
+        backPaint..shader = endGradient.createShader(rect));
+    canvas.drawCircle(
+        Offset(110, -21), 12.w, foregroundPaint..style = PaintingStyle.fill);
+    TextPainter textPainter = TextPainter(
+        text: TextSpan(
+            text: 'LV$lowLevel',
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 22.sp,
+            )),
+        textDirection: TextDirection.ltr);
+    textPainter.layout();
+    textPainter.paint(canvas, Offset(-117, -40));
+    textPainter
+      ..text = TextSpan(
+          text: 'LV${lowLevel + 1}',
+          style: TextStyle(
+            color: Colors.white,
+            fontSize: 22.sp,
+          ));
+    textPainter.layout();
+    textPainter.paint(canvas, Offset(103, -40));
+  }
+
+  @override
+  bool shouldRepaint(ProgressBarPainter oldDelegate) {
+    return oldDelegate.proportion != proportion;
+  }
+}