You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter情绪随机器界面开发问题:6个环绕圆形旋转异常

Flutter情绪随机器界面旋转异常问题

我正在开发一个情绪随机器界面,界面包含1个中心圆形和6个环绕圆形,需求是点击任意环绕圆形时,6个圆形开始绕中心旋转。界面设计参考:
界面设计图

我尝试使用circular_rotation: ^0.0.1包实现该需求,但添加第5个环绕圆形时出现异常,以下是我的代码:

import 'dart:math';
import 'package:circular_rotation/circular_rotation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:islamicapp/app/data/constant/app_color.dart';
import 'package:islamicapp/app/data/constant/image_string.dart';
import 'package:islamicapp/app/views/widgets/button_text2.dart';
import 'package:islamicapp/app/views/widgets/ktext2.dart';

class Randomizer extends StatefulWidget {
  const Randomizer({super.key});

  @override
  State<Randomizer> createState() => _RandomizerState();
}

class _RandomizerState extends State<Randomizer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.green,
      body: Container(
        width: Get.width,
        height: Get.height,
        alignment: Alignment.center,
        child: CircularRotation(
          circularRotationProperty: CircularRotationModel(
            // defaultCircleStrokeWidth: Dimens.strokeSmall,
            defaultCircleStrokeColor: Colors.transparent,
            startAnimation: false,
            repeatAnimation: false,
            firstCircleAnimationDuration: 12000,

            // thirdCircleAnimationDuration: 10000,
            centerWidget: Container(
              width: 150.w,
              height: 150.h,
              padding: EdgeInsets.all(10),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: AppColor.feel,
                shape: BoxShape.circle,
              ),
              child: KText2(
                text: "feel".tr,
                fontSize: 24.sp,
                fontWeight: FontWeight.bold,
              ),
            ),

            visibleThirdCircle: false,
            firstCircleWidgets: [
              InkWell(
                // onTap: CircularRotation.eitherStartOrStopAnimation,
                child: Container(
                  width: 100.w,
                  // height: 100.h,
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                  ),
                  child: Column(
                    children: [
                      Image(
                        image: ImageString.happy,
                        width: 60.w,
                        height: 60.h,
                      ),
                      KText2(
                        text: "happy".tr,
                        fontSize: 20.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                ),
              ),
              InkWell(
                // onTap: CircularRotation.eitherStartOrStopAnimation,
                child: Container(
                  width: 100.w,
                  // height: 100.h,
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                  ),
                  child: Column(
                    children: [
                      Image(
                        image: ImageString.happy,
                        width: 60.w,
                        height: 60.h,
                      ),
                      KText2(
                        text: "happy".tr,
                        fontSize: 20.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                ),
              ),
              InkWell(
                // onTap: CircularRotation.eitherStartOrStopAnimation,
                child: Container(
                  width: 100.w,
                  // height: 100.h,
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                  ),
                  child: Column(
                    children: [
                      Image(
                        image: ImageString.happy,
                        width: 60.w,
                        height: 60.h,
                      ),
                      KText2(
                        text: "happy".tr,
                        fontSize: 20.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                ),
              ),
              InkWell(
                // onTap: CircularRotation.eitherStartOrStopAnimation,
                child: Container(
                  width: 100.w,
                  // height: 100.h,
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                  ),
                  child: Column(
                    children: [
                      Image(
                        image: ImageString.happy,
                        width: 60.w,
                        height: 60.h,
                      ),
                      KText2(
                        text: "happy".tr,
                        fontSize: 20.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ],
                  ),
                ),
              ),
            ],
            firstCircleRadius: 330.w,
            visibleSecondCircle: true,
            // secondCircleRadius: 330.w,
            // secondCircleAnimationDuration: 12000,
            // thirdCircleRadius: 150.w,
            // secondCircleWidgets: [
            //   Container(
            //     width: 120.w,
            //     // height: 100.h,
            //     padding: EdgeInsets.all(10),
            //     alignment: Alignment.center,
            //     decoration: BoxDecoration(
            //       color: Colors.white,
            //       shape: BoxShape.circle,
            //     ),
            //     child: Column(
            //       children: [
            //         Image(
            //           image: ImageString.happy,
            //           width: 60.w,
            //           height: 60.h,
            //         ),
            //         KText2(
            //           text: "happy".tr,
            //           fontSize: 20.sp,
            //           fontWeight: FontWeight.bold,
            //         ),
            //       ],
            //     ),
            //   ),
            // ],
            // thirdCircleWidgets: _thirdCircleImages,
            // thirdCircleRadians: Dimens.thirdCircleRadians,
            // secondCircleRadians: Dimens.secondCircleRadians,
            // firstCircleRadians: Dimens.firstCircleRadians,
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者Diificult Ranger

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 15:27:58