skip to Main Content

I am using the library flutter_colorpicker library. My Widget has a variable called isEditing to know that the screen is in editing mode. The editing mode fetches some data from a sqlite database, puts it on the screen and changes the logic of the Save button a bit.

The ColorPicker when isEditing is false, works fine. But it does not work on editing mode. When I click Ready on the color Picker, the Container does not changes the color and the color in the database remains the same.

Anyone knows what’s happening?
Thank you.

class ManageCategory extends StatefulWidget {
  const ManageCategory({Key? key, required this.isEditing, this.category})
      : super(key: key);

  final bool isEditing;
  final Map<String, dynamic>? category; // <- Loaded trough sqflite in parent class.

  @override
  State<ManageCategory> createState() => _ManageCategoryState();
}

class _ManageCategoryState extends State<ManageCategory> {
  String title = '';
  final _nameController = TextEditingController();
  final _descController = TextEditingController();
  Color _color = Colors.blue;
  final _dbInstance = TimeManagerDB.instance;

  @override
  Widget build(BuildContext context) {
    if (widget.isEditing) {
      title = 'Edit category';
      _nameController.text = widget.category!['name'];
      _descController.text = widget.category!['desc'];
      _color = Color(widget.category!['color']);
    } else {
      title = 'Create category';
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        actions: widget.isEditing
            ? [
                IconButton(onPressed: onDelete, icon: const Icon(Icons.delete)),
              ]
            : null,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          Text(
            'Nome',
            style: Theme.of(context).textTheme.displayMedium,
          ),
          TextField(
            controller: _nameController,
            decoration: const InputDecoration(border: OutlineInputBorder()),
          ),
          const SizedBox(height: 24.0),
          Text(
            'Descrição',
            style: Theme.of(context).textTheme.displayMedium,
          ),
          TextField(
            controller: _descController,
            decoration: const InputDecoration(border: OutlineInputBorder()),
            maxLines: 4,
          ),
          const SizedBox(height: 24.0),
          Row(
            children: [
              Container(
                height: 60.0,
                width: 18.0,
                color: _color,
              ),
              const SizedBox(width: 16.0),
              Text(
                'Cor',
                style: Theme.of(context).textTheme.displayMedium,
              ),
              const Spacer(),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: const Text('Choose a color!'),
                          content: SingleChildScrollView(
                            child: ColorPicker(
                              pickerColor: _color,
                              enableAlpha: false,
                              onColorChanged: (color) {
                                _color = color;
                              },
                            ),
                          ),
                          actions: <Widget>[
                            ElevatedButton(
                              child: const Text('Ready'),
                              onPressed: () {
                                setState(() {
                                  Navigator.of(context).pop();
                                });
                              },
                            ),
                          ],
                        );
                      });
                },
                child: const Text("Choose"),
              ),
            ],
          ),
          const SizedBox(height: 64.0),
          Center(
            child: ElevatedButton(
              onPressed: onSave,
              child: const Text('Save'),
            ),
          ),
        ],
      ),
    );
  }
}

2

Answers


  1. Chosen as BEST ANSWER

    I solved the problem moving the variables initializations to the initState().

      @override
      void initState() {
        super.initState();
        if (widget.isEditing) {
          title = 'Editar categoria';
          _nameController.text = widget.category!['name'];
          _descController.text = widget.category!['desc'];
          _color = Color(widget.category!['color']);
        } else {
          title = 'Criar categoria';
        }
    

    }


  2. hey, should setState to rebuild the UI:

    onColorChanged: (color) {
      setState(() {
        _color = color;
      });
    },
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search