Flutter round checkbox

by

Flutter Round Checkbox

Here is an example of how to create a round checkbox in Flutter:

    
import 'package:flutter/material.dart';

class RoundCheckbox extends StatefulWidget {
  @override
  _RoundCheckboxState createState() => _RoundCheckboxState();
}

class _RoundCheckboxState extends State {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isChecked = !isChecked;
        });
      },
      child: Container(
        width: 24,
        height: 24,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(
            color: isChecked ? Colors.green : Colors.black,
          ),
        ),
        child: isChecked
            ? Icon(
                Icons.check,
                color: Colors.green,
                size: 16,
              )
            : null,
      ),
    );
  }
}

// Usage:
RoundCheckbox(),

In this example, we create a custom `RoundCheckbox` widget that extends `StatefulWidget`. Inside the widget, we have a `isChecked` boolean variable that determines whether the checkbox is checked or not. We use a `GestureDetector` to detect taps on the checkbox and toggle the `isChecked` value when tapped.

The checkbox is rendered as a container with a specified width and height to create a circular shape. We set the `shape` property of the `BoxDecoration` to `BoxShape.circle` and define a border color based on whether the checkbox is checked or unchecked.

If the checkbox is checked, we also display an `Icon` widget with a checkmark. The icon color is set to green to indicate that the checkbox is checked.

To use this custom `RoundCheckbox` widget, simply add `RoundCheckbox()` to your Flutter code.

Leave a comment