Search code examples
flutterflutter-layout

Flutter rounded corners on Tick box


my app has a very rounded type design and I am looking to use tick boxes as part of the UI. The design doesn't look good with completely circular tick 'boxes'. I was looking to round the corners of a standard tick box, as you would fo with a container. Any ideas on how this can be achieved. I have tried to contain the tickbox inside a container and round the corners of the container, doesn't work.


Solution

  • You can create your own checkbox like this:

    InkWell(
      onTap: () {
        setState(() {
          _value = !_value;
        });
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: 4),
          borderRadius: BorderRadius.circular(8),
        ),
        child: _value
          ? Icon(
              Icons.check,
              size: 30.0,
              color: Colors.blue,
            )
          : Icon(
              null,
              size: 30.0,
            ),
      ),
    ),