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
I solved the problem moving the variables initializations to the initState().
}
hey, should setState to rebuild the UI: