CODEWITHSUNDEEP
flutterflutter-layout
fds18
fds18

Reputation: 118

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.

Upvotes: 2

Views: 2340

Answers (1)

Saeed Fekri
Saeed Fekri

Reputation: 1135

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,
        ),
  ),
),

Upvotes: 6

Related Questions