Is it possible to draw a checkbox in dart using paint class or something? I don't like the difficulty of customizability of the current official checkBox with always have to wrap it with materials library. My idea is to draw a square with customPaint class and stack positioning a tick icon in the mid and placing a gesture detector to detect clicks, to check and uncheck the tick? Is there any other elegant way of doing it? Any ideas?

CodePudding user response：

Please refer below code

class _CustomCheckBoxState extends State<CustomCheckBox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  "Custom Check Box",
                ),
                InkWell(
                  onTap: () {
                    setState(() {
                      isChecked = !isChecked;
                    });
                  },
                  child: Container(
                    width: 20.0,
                    height: 20.0,
                    padding: EdgeInsets.symmetric(
                      vertical: 0.7,
                      horizontal: 0.7,
                    ),
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(64, 212, 232, 0.18),
                      border: Border.all(
                        width: 1,
                        color: Color(0xff40D4E8),
                      ),
                      borderRadius: BorderRadius.circular(4.0),
                    ),
                    child: (isChecked == true)
                        ? Center(
                            child: Icon(
                              Icons.check,
                              color: Colors.black,
                              size: 16.0,
                            ),
                          )
                        : Container(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}