How to design the below UI Design in Flutter

Question

Hello fellow developers,

I'm currently working on a project where I need to implement a dialer UI component, and I'm encountering some difficulties in achieving the desired design. I've tried to follow the design specifications provided in Figma, but unfortunately, I'm not getting the expected results. I've searched various resources and forums, but haven't found a solution that addresses my specific issue.

To give you a better understanding of my problem, I've included my current code and the result it's producing below:

Stack(
        alignment: Alignment.center,
        children: [
          Center(
            child: Image.asset(
              AquagenixproAssets.dialerBack,
              fit: BoxFit.cover,
              height: 280,
              width: 280,
            ),
          ),
          Obx(() {

            return Transform.rotate(
              angle: angle.value,
              child: Center(
                child: Container(
                  height: 110,
                  width: 110,
                  decoration: BoxDecoration(
                    // color: Colors.red,
                    gradient: const LinearGradient(colors: [
                      Color(0xFF347A6A),
                      Color(0xFF034132),
                    ]),
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        offset: const Offset(0, 1.5754189491271973),
                        blurRadius: 0.7877094745635986,
                        spreadRadius: 0,
                        color: const Color(0xFFEDEFFF).withOpacity(0.57),
                        blurStyle: BlurStyle.inner,
                      ),
                      BoxShadow(
                        offset: const Offset(0, 22.055866241455078),
                        blurRadius: 50.41340637207031,
                        spreadRadius: 0,
                        color: Colors.black.withOpacity(0.9),
                      ),
                      BoxShadow(
                        offset: const Offset(0, 3.1508378982543945),
                        blurRadius: 3.1508378982543945,
                        spreadRadius: 0,
                        color: Colors.black.withOpacity(0.25),
                      ),
                      BoxShadow(
                        offset: const Offset(1.5754189491271973, 0),
                        blurRadius: 1.5754189491271973,
                        spreadRadius: 0,
                        color: Colors.white.withOpacity(0.2),
                        blurStyle: BlurStyle.inner,
                      ),
                    ],
                  ),
                  child: Container(
                    height: 92,
                    width: 92,
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(colors: [
                        Color(0xFF166351),
                        Color(0xFF0E4F40),
                        Color(0xFF355C53),
                      ]),
                      shape: BoxShape.circle,
                      boxShadow: [
                        BoxShadow(
                          offset: const Offset(0, -0.7877094745635986),
                          blurRadius: 0.7877094745635986,
                          spreadRadius: 0,
                          color: const Color(0xFFEDEFFF).withOpacity(0.17),
                          blurStyle: BlurStyle.inner,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          }),
        ],
      ),

from the above the result is My code result
what I am expecting :- Expecting result

I would greatly appreciate any guidance, advice, or suggestions from the community on how to overcome these challenges and successfully implement the dialer UI component. If you have any insights, code snippets, or resources that could be helpful in this context, please share them. Your assistance will be invaluable in moving this project forward.

Thank you in advance for your time and support.