问题

I am trying to build a custom check box like this:

which is simply a round container containing an icon inside,
clicking on it will change the container background color and the icon color,

I tried to build a custom widget in FlutterFlow using custom checkbox Flutter packages, but they all need me to pass a function to the custom, but I have the following error:

> Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor.

That happened again when I tried to build it myself without using packages. Here is the code I searched and found:

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';

// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class IngridentsCheckBox extends StatefulWidget {
  const IngridentsCheckBox({
    Key? key,
    this.width,
    this.height,
    required this.onChange,
    required this.isChecked,
    required this.size,
    required this.iconSize,
    required this.selectedColor,
    required this.selectedIconColor,
    required this.borderColor,
    required this.checkIcon,
  }) : super(key: key);

  final double? width;
  final double? height;
  final Function onChange;
  final bool isChecked;
  final double size;
  final double iconSize;
  final Color selectedColor;
  final Color selectedIconColor;
  final Color borderColor;
  final Icon checkIcon;

  @override
  _IngridentsCheckBoxState createState() => _IngridentsCheckBoxState();
}

class _IngridentsCheckBoxState extends State<IngridentsCheckBox> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
          widget.onChange(_isSelected);
        });
      },
      child: AnimatedContainer(
        margin: EdgeInsets.all(4),
        duration: Duration(milliseconds: 500),
        curve: Curves.fastLinearToSlowEaseIn,
        decoration: BoxDecoration(
            color: _isSelected
                ? widget.selectedColor ?? Colors.blue
                : Colors.transparent,
            borderRadius: BorderRadius.circular(3.0),
            border: Border.all(
              color: widget.borderColor ?? Colors.black,
              width: 1.5,
            )),
        width: widget.size ?? 18,
        height: widget.size ?? 18,
        child: _isSelected
            ? Icon(
                Icons.check,
                color: widget.selectedIconColor ?? Colors.white,
                size: widget.iconSize ?? 14,
              )
            : null,
      ),
    );
  }
}

And those are the parameters I am sending to the custom widget:

I am getting the same error, which is not clear enough to know exactly what is the issue. In previous versions of the code, the error disappeared when I removed the "onChange" function, so I do not know if it was the reason.

I also tried to do it using Flutter state but couldn't make it work, so I will be thankful if someone helps.

PLEASE NOTE: The code quoted is for a custom checkbox I found on StackOverflow. I used to customize it later if it worked on FlutterFlow, but I couldn't make it work.

    // Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
class IngridentsCheckBox extends StatefulWidget {
const IngridentsCheckBox({
Key? key,
this.width,
this.height,
required this.onChange,
required this.isChecked,
required this.size,
required this.iconSize,
required this.selectedColor,
required this.selectedIconColor,
required this.borderColor,
required this.checkIcon,
}) : super(key: key);
final double? width;
final double? height;
final Function onChange;
final bool isChecked;
final double size;
final double iconSize;
final Color selectedColor;
final Color selectedIconColor;
final Color borderColor;
final Icon checkIcon;
@override
_IngridentsCheckBoxState createState() => _IngridentsCheckBoxState();
}
class _IngridentsCheckBoxState extends State<IngridentsCheckBox> {
bool _isSelected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_isSelected = !_isSelected;
widget.onChange(_isSelected);
});
},
child: AnimatedContainer(
margin: EdgeInsets.all(4),
duration: Duration(milliseconds: 500),
curve: Curves.fastLinearToSlowEaseIn,
decoration: BoxDecoration(
color: _isSelected
? widget.selectedColor ?? Colors.blue
: Colors.transparent,
borderRadius: BorderRadius.circular(3.0),
border: Border.all(
color: widget.borderColor ?? Colors.black,
width: 1.5,
)),
width: widget.size ?? 18,
height: widget.size ?? 18,
child: _isSelected
? Icon(
Icons.check,
color: widget.selectedIconColor ?? Colors.white,
size: widget.iconSize ?? 14,
)
: null,
),
);
}
}

答案1

得分: 1

这不是一个直接的解决方案。

我能够通过使用以下包来解决这个问题。
https://pub.dev/packages/icon_checkbox

希望这能帮助你。