tripz-llc/dashboards/admin/lib/views/widgets/circle_container.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../constant/colors.dart';

class MyCircleContainer extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final Color borderColor;

  MyCircleContainer({
    super.key,
    required this.child,
    this.backgroundColor = AppColor.secondaryColor,
    this.borderColor = AppColor.accentColor,
  });

  final controller = Get.put(CircleController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CircleController>(
        builder: ((controller) => GestureDetector(
              onTap: () {
                controller.changeColor();
              },
              child: AnimatedContainer(
                onEnd: () {
                  controller.onEnd();
                },
                duration: const Duration(milliseconds: 300),
                width: controller.size,
                height: controller.size,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: controller.backgroundColor,
                  border: Border.all(
                    color: borderColor,
                    width: 1,
                  ),
                ),
                child: Center(child: child),
              ),
            )));
  }
}

class CircleController extends GetxController {
  Color backgroundColor = AppColor.secondaryColor;
  double size = 40;
  void changeColor() {
    backgroundColor = backgroundColor == AppColor.secondaryColor
        ? AppColor.accentColor
        : AppColor.secondaryColor;
    size = 60;
    update();
  }

  void onEnd() {
    size = 40;
    update();
  }
}