A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

Related tags

Templates circular_check_box
Overview

Circular Check Box

Pub

A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

Installing

Add this to your package's pubspec.yaml file.

dependencies:
   circular_check_box: ^x.y.z

Now in your Dart code you can use:

import import 'package:circular_check_box/circular_check_box.dart';

Usage

To use CircularCheckBox widget simply include it in your build method like this:

CircularCheckBox(
    value: this.circularSelected,
    onChanged: (value) {
        this.setState(() {
            this.circularSelected = value;
        });
    },
),

The CircularCheckBox can be customized with many properties, including:

  • tristate - the circular checkbox will have three states: unselected, selected with a check and selected with a dash
  • checkColor - change the color of the check icon
  • activeColor - change the color of the selected circular checkbox

Null Safety

This package is null safe ready, so it can be used with the new dart's Sound Null Safety.

License

Watch the License file here

Changelog

Refer to the Changelog to get all the release notes.

Comments
  • After migration on flutter 1.17 application wont build

    After migration on flutter 1.17 application wont build

    Compiler message: ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:168:13: Error: Expected 0 type arguments. Map<Type, Action> _actionMap; ^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:178:23: Error: Type 'ActivateIntent' not found. void _actionHandler(ActivateIntent intent){ ^^^^^^^^^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:173:25: Error: Expected 0 type arguments. _actionMap = <Type, Action>{ ^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:174:38: Error: 'ActivateIntent' isn't a type. ActivateIntent: CallbackAction(onInvoke: _actionHandler), ^^^^^^^^^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:174:53: Error: Too few positional arguments: 1 required, 0 given. ActivateIntent: CallbackAction(onInvoke: _actionHandler), ^ ../flutter-sdk/packages/flutter/lib/src/widgets/actions.dart:128:9: Context: Found this candidate, but the arguments don't match. const CallbackAction(LocalKey intentKey, {@required this.onInvoke}) ^^^^^^^^^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:174:7: Error: The getter 'ActivateIntent' isn't defined for the class '_CircularCheckBoxState'.

    • '_CircularCheckBoxState' is from 'package:circular_check_box/circular_check_box.dart' ('../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'ActivateIntent'. ActivateIntent: CallbackAction(onInvoke: _actionHandler), ^^^^^^^^^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:173:40: Error: A value of type 'Map<Type, Action>' can't be assigned to a variable of type 'Map<Type, invalid-type>'.
    • 'Map' is from 'dart:core'.
    • 'Type' is from 'dart:core'.
    • 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../flutter-sdk/packages/flutter/lib/src/widgets/actions.dart'). _actionMap = <Type, Action>{ ^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:178:23: Error: 'ActivateIntent' isn't a type. void _actionHandler(ActivateIntent intent){ ^^^^^^^^^^^^^^ ../flutter-sdk/.pub-cache/hosted/pub.dartlang.org/circular_check_box-1.0.2/lib/circular_check_box.dart:226:16: Error: The argument type 'Map<Type, invalid-type>' can't be assigned to the parameter type 'Map<LocalKey, Action Function()>'.
    • 'Map' is from 'dart:core'.
    • 'Type' is from 'dart:core'.
    • 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../flutter-sdk/packages/flutter/lib/src/foundation/key.dart').
    • 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../flutter-sdk/packages/flutter/lib/src/widgets/actions.dart'). actions: _actionMap, ^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
    opened by pinball83 4
  • Add support for Null Safety and more fixes

    Add support for Null Safety and more fixes

    This PR will convert this package to the new flutter's sound null safety and fix some overall problems.

    The library and the example app are both using dart SDK version 1.12.0-0 with null safety enabled.

    Added

    • web platform in the example app
    • instructions and documentation in the README.md file

    Changed

    • reversed the order of the entries on CHANGELOG.md; it makes more sense that the last release is on top
    • the API exposed by CircularCheckBox is slightly different but follows the one exposed by the original Checkbox

    Removed

    • .idea .iml files from version control since those files are autogenerated by Android Studio and don't contain information crucial to the library
    • android directory on the library level is not needed. The example folder contains his own android folder
    opened by Supercaly 1
  • white active color

    white active color

    Setting the active color to Colors.white cause the Widget to display a white filled circle. Maybe, in this case, the tic mark could become transparent.

    opened by Supercaly 1
  • Fix error caused by flutter Action API change

    Fix error caused by flutter Action API change

    Important

    This commit will fix an error caused by the latest flutter master channel update, using it with the stable channel may cause the same error where the Action type is undefined.

    This commit will fix the error caused by the latest flutter master update (1.18.0-5.0.pre.57), where the Action API is changed. See flutter issue #42940 for more detail.

    opened by Supercaly 0
  • Change circular_check_box to resemble the material version

    Change circular_check_box to resemble the material version

    Add the ability to customize check, focus and hover color Add the use of FocusNode and autofocus using FocusableActionDetector Add the use of VisualDensity Change the way the circular border is drawn, using Paint's strokeWidth and style

    opened by Supercaly 0
  • RenderToggable not found

    RenderToggable not found

    I couldn't fix this issue. Could you check please.

    /C:/Users/xxxxxx/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/circular_check_box-1.0.4/lib/circular_check_box.dart:338:39: Error: Type 'RenderToggleable' not found.
class _RenderCircularCheckBox extends RenderToggleable {
                                      ^^^^^^^^^^^^^^^^
    opened by audvik 2
  • Requesting new release

    Requesting new release

    It seems like the package is already null safe and in this repo, the sdk version is already set to 2.12.0, so it should just be a matter of releasing a new version.

    Thank you for considering!

    opened by Florian-Schoenherr 8
  • NoSuchMethodError was thrown during paint()

    NoSuchMethodError was thrown during paint()

    When hovering on a circle checkbox on web I receive the following error:

    The following NoSuchMethodError was thrown during paint():
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []

The relevant error-causing widget was
CircularCheckBox
lib/components/circle_checkbox.dart:38
When the exception was thrown, this was the stack
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 78:3        throwNullValueError
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 490:39  _notNull
packages/flutter/src/material/toggleable.dart 500:26                              paintRadialReaction
packages/circular_check_box/circular_check_box.dart 448:5                         paint
...
The following RenderObject was being processed when the exception was fired: _RenderCircularCheckBox#56932
RenderObject: _RenderCircularCheckBox#56932
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=20.0, h=20.0)
    size: Size(20.0, 20.0)
    additionalConstraints: BoxConstraints(w=32.0, h=32.0)
    value: unchecked
════════════════════════════════════════════════════════════════════════════════

    iphone 12 pro simulator running 14.4 seems to work correctly, and the logic seems to be working correctly on web. My values are being correctly toggled. Just seems to be erroring on the hover animation on web.

    [✓] Flutter (Channel beta, 1.26.0-17.8.pre, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.53.2)
[✓] Connected device (2 available)```
    opened by interlochen 0
Owner
Mash Ibtesum
Mash Ibtesum
GitHub
This is the standard Flutter template application, modified to run on desktop.

Desktop Flutter Example This is the standard Flutter template application, modified to run on desktop. The linux, macos, and windows directories serve

Sheikh Shofiullah 8 Sep 26, 2022
Text and TextField highlighted with rounded corners

rounded_background_text Highlight text with rounded corners Features ✅ Highlight

Bruno D'Luka 39 Nov 6, 2022
An easy way to add rounded corner floating app bar in Flutter project.

rounded_floating_app_bar Rounded floating app bar like new google applications has. This package provides an easy way to add rounded corner floating a

Bhavik Makwana 30 Nov 11, 2021
I present to you the version 2 of my portfolio website https://davidcobbina.com . The design is elegant, simple minimal and beautiful. It was crafted with love using flutter. Find the first version of my portfolio here - (https://github.com/david-legend/aerium)

davidcobbina.com This is the second Iteration of my portfolio website (https://github.com/david-legend/aerium). It is inspired by Julius Guevarra's De

David-Legend 167 Dec 18, 2022
A flutter package that developers have pretty logs instead just printing everything like a newbie

A flutter package that developers have pretty logs instead just printing everything like a newbie. Features Makes it easy to log to console without us

null 2 Nov 28, 2021
A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example.

A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example. Features Represents large numbers in ter

Rohit V 1 Oct 8, 2022
Cross-platform flutter plugin for reading and writing NFC tags. Not maintained anymore - not looking for new maintainer, fork instead.

nfc_in_flutter NFC in Flutter is a plugin for reading and writing NFC tags in Flutter. It works on both Android and iOS with a simple stream interface

Andi Semler 113 Sep 28, 2022
A Flutter widget to set time with spinner instead of material time picker

flutter_time_picker_spinner Time Picker widget with spinner instead of a material time picker. 12H format 24H format 24H format with second Custom sty

Bobby Stenly Irawan 34 Aug 8, 2022
A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in Flutter.

Red Screen Of Death What A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in

Ahmad Melegy 178 Dec 9, 2022
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Dec 22, 2022
Selectable Circle where colors can be customized and a child widget can be defined

selectable_circle A Flutter package for an Circle that can be Selected with animation. How to use SelectableCircle( width: 80.0, onSelected: (

null 11 Sep 29, 2021
Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Mehran Jafari 10 Oct 29, 2022
A new Flutter package for circle list.

circle_list A new Flutter package for Circle List. Add dependency dependencies: circle_list: ^1.0.2 Super simple to use import 'package:flutter/mat

Xiao Li 34 Dec 15, 2022
Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Ahmed Abdelkader Khedr 9 Nov 1, 2022
Trying out Flutter for desktop Web app development as an alternative to SPA frameworks (such as React and Angular) by recreating one of the pages of an existing CV Management web app

HTML Renderer Demo CanvasKit Renderer Demo Reddit discussion This repo contains a PoC of using Flutter as a traditional SPA framework for creating a d

Maxim Saplin 20 Oct 11, 2022
flutter_thrio makes it easy and fast to add flutter to existing mobile applications, and provide a simple and consistent navigator APIs.

中文文档 英文文档 问题集 原仓库不再维护，代码已经很老了 最近版本更新会很快，主要是增加新特性，涉及到混合栈的稳定性的问题应该不多，可放心升级，发现问题加 QQ 群号码：1014085473，我会尽快解决。 不打算好好看看源码的使用者可以放弃这个库了，因为很多设定是比较死的，而我本人不打算花时间写

null 290 Dec 29, 2022
FlutterBoost is a Flutter plugin which enables hybrid integration of Flutter for your existing native apps with minimum efforts

中文文档 中文介绍 Release Note v3.0-preview.17 PS: Before updating the beta version, please read the CHANGELOG to see if there are any BREAKING CHANGE Flutter

Alibaba 6.3k Dec 30, 2022
flutter_thrio makes it easy and fast to add flutter to existing mobile applications, and provide a simple and consistent navigator APIs.

本仓库不再维护，可移步新仓库 https://github.com/flutter-thrio/flutter_thrio 中文文档 问题集 QQ 群号码：1014085473 The Navigator for iOS, Android, Flutter. Version 0.2.2 requir

Hellobike 732 Dec 5, 2022
Tencent Cloud Chat: Samples of integratation Flutter SDK to an existing app.

Tencent Cloud Chat Integrate In-App Chat and Call to your existing applications. Samples of integration Flutter SDK to an existing app. This directory

Tencent Cloud 4 Nov 24, 2022