Container(
            decoration: BoxDecoration(shape: BoxShape.circle),
            child: Material(
              color: Colors.orange,
              child: InkWell(
                splashColor: Colors.black,
                onTap: () {},
                child: Ink(
                  decoration: BoxDecoration(shape: BoxShape.circle),
                  height: Get.height * 0.0425,
                  width: Get.height * 0.0425,
                  child: Icon(Icons.holiday_village),
                ),
              ),
            ),
          ),

I want to make this InkWell stuff circular shape. Nothing seems to make it circular. If I take out Material(), then it shows no background color nor the splash color does not appear. How can I reshape this Contaner - InkWell circular to make sure that the button is circular shape with the splashColor?

CodePudding user response：

Use customBorder: CircleBorder(), on InkWell and shape: const CircleBorder(), on Material

Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
          ),
          child: Material(
            color: Colors.orange,
            shape: const CircleBorder(),
            child: InkWell(
              splashColor: Colors.black,
              onTap: () {},
              customBorder: const CircleBorder(),
              child: Ink(
                decoration: const BoxDecoration(shape: BoxShape.circle),
                height: 425,
                width: 425,
                child: const Icon(Icons.holiday_village),
              ),
            ),
          ),
        ),