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
相关产品推荐
相关产品推荐

