flutterflutter-material

Unchecked Material Checkboxes not visible


Currently, I have to deal with a Flutter project that uses the flutter/material.dart package to display checkboxes, like so:

// ...
Checkbox(
    value: item.areaShowOnMap,
    activeColor: theme.colorPrimary,
    onChanged: (bool value){ //
      item.areaShowOnMap = value;
      if (value)
        _setCircle(item);
      else
        _deleteCircle(item);
    }
),
// ...

However the result looks like this:

Animation that shows a checkbox that is hidden when it's unchecked

This happens throughout the entire application on every checkbox. I tried to set the checkColor to Colors.black, but it's still invisible when it's unchecked, both on Android and iOS.

My question is: What could be the cause of the problem? I guess the inactive color is transparent, but I don't know how I can control this.


Solution

  • Check whether in your sample you set the ThemeData.checkBoxThemeData

    Simple code snippet to reproduce your issue.

    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    /// This is the main application widget.
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      static const String _title = 'Flutter Code Sample';
    
         Color getColor(Set<MaterialState> states) {
          const Set<MaterialState> interactiveStates = <MaterialState>{
            MaterialState.pressed,
            MaterialState.hovered,
            MaterialState.focused,
          };
          if (states.any(interactiveStates.contains)) {
            return Colors.brown;
          }
          return Colors.transparent;
        }
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          theme: ThemeData(
           checkboxTheme: CheckboxThemeData(
             fillColor: MaterialStateProperty.resolveWith(getColor)
           ),
          ),
          home: MyStatefulWidget(),
        );
      }
    }
    
    /// This is the stateful widget that the main application instantiates.
    class MyStatefulWidget extends StatefulWidget {
      const MyStatefulWidget({Key? key}) : super(key: key);
    
      @override
      State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
    }
    
    /// This is the private State class that goes with MyStatefulWidget.
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      
      bool isSelected = false;
     
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text('CheckBox')
          ),
          body: Center(
            child: Checkbox(
             value: isSelected,
             activeColor: Theme.of(context).primaryColor,
             onChanged:(bool? value){
               setState((){
                 isSelected = !isSelected;
               });
             } 
            ), 
          ),
        );
      }
    }
    

    Check whether your returned transparent in CheckBoxThemeData.fillColor

    Color getColor(Set<MaterialState> states) {
              const Set<MaterialState> interactiveStates = <MaterialState>{
                MaterialState.pressed,
                MaterialState.hovered,
                MaterialState.focused,
              };
              if (states.any(interactiveStates.contains)) {
                return Colors.brown;
              }
              /// Instead of this you can return the Color                   
              return Colors.transparent;
            }