I am in the process of learning Flutter, but i have run into a problem where my listtile does not want to change the background color after i come back from my _displaySettingBox function which return a showDialog. It does change to color when i am going back into the _displaySettingBox
The color stored in a list (Listinfonotes) which also content a name (String) and a note (String)
To me is seem that the ListView is not redraw the list of listtile, but there are not any problem when creating (_displayTextInputDialog) and deleting (_displayDeleteBox).
class _MyHomePageState extends State<MyHomePage> {
List<ListContent> infonotes = [];
String? codeDialog = "";
String? valueText;
@override
Widget build(BuildContext context) {
if (codeDialog!.isNotEmpty) {
ListContent newnote = ListContent(codeDialog!, "", Colors.white);
infonotes.add(newnote);
codeDialog = "";
}
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: ListView.builder(
itemCount: infonotes.length,
itemBuilder: (context, index) {
ListContent note = infonotes[index];
return Card(
elevation: 10,
shadowColor: Colors.blueGrey,
child: ListTile(
dense: true,
contentPadding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
// side: const BorderSide(width: 2),
),
tileColor: note.color,
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(
Icons.delete_outline,
size: 30,
),
onPressed: () {
_displayDeleteBox(context, index);
},
),
const SizedBox(
width: 15,
),
IconButton(
icon: const Icon(
Icons.settings_outlined,
size: 30,
),
onPressed: () {
setState(() {
_displaySettingBox(context, index);
});
},
)
],
),
title: Text(
note.name,
style: DefaultTextStyle.of(context)
.style
.apply(fontSizeFactor: 1.5),
),
onTap: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SecondRoute(
todo: note.notes,
titlename: note.name,
);
},
),
);
// print(result);
note.notes = result;
},
),
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
_displayTextInputDialog(context);
},
tooltip: 'Create note',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
// Setting view
Future _displaySettingBox(BuildContext context, int index) async {
// ListContent note = infonotes[index];
Map<String, Color> colorDict = {
"White": Colors.white,
"Red": Colors.red,
"Green": Colors.green,
"Blue": Colors.blue,
"Purple": Colors.purple
};
Color dropdownvalue = infonotes[index].color;
Key testkey = const Key("Red");
return showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: const Text('Settings'),
content: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton<Color>(
// Down Arrow Icon
key: testkey,
icon: const Icon(Icons.keyboard_arrow_down),
value: dropdownvalue,
// Array list of items
items: colorDict
.map((key, value) {
return MapEntry(
key,
DropdownMenuItem(
value: value,
child: Text(key),
),
);
})
.values
.toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged: (Color? newValue) {
if (newValue != null) {
setState(
() {
dropdownvalue = newValue;
},
);
}
},
),
],
),
actions: <Widget>[
MaterialButton(
color: Colors.red,
textColor: Colors.white,
child: const Text('CANCEL'),
onPressed: () {
setState(() {
Navigator.pop(context);
});
},
),
MaterialButton(
color: Colors.green,
textColor: Colors.white,
child: const Text('OK'),
onPressed: () {
setState(() {
infonotes[index].color = dropdownvalue;
Navigator.pop(context);
});
},
),
],
);
},
);
});
}
// delete note viewer
Future<void> _displayDeleteBox(BuildContext context, int index) async {
ListContent note = infonotes[index];
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Delete note'),
content: Text(note.name),
actions: <Widget>[
MaterialButton(
color: Colors.red,
textColor: Colors.white,
child: const Text('CANCEL'),
onPressed: () {
setState(() {
Navigator.pop(context);
});
},
),
MaterialButton(
color: Colors.green,
textColor: Colors.white,
child: const Text('OK'),
onPressed: () {
setState(() {
infonotes.removeAt(index);
Navigator.pop(context);
});
},
),
],
);
});
}
// create a new note viewer
final TextEditingController _textFieldController = TextEditingController();
Future<void> _displayTextInputDialog(BuildContext context) async {
_textFieldController.clear();
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Create note'),
content: TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: _textFieldController,
decoration: const InputDecoration(hintText: "Note name"),
),
actions: <Widget>[
MaterialButton(
color: Colors.red,
textColor: Colors.white,
child: const Text('CANCEL'),
onPressed: () {
setState(() {
Navigator.pop(context);
});
},
),
MaterialButton(
color: Colors.green,
textColor: Colors.white,
child: const Text('OK'),
onPressed: () {
setState(() {
codeDialog = valueText;
Navigator.pop(context);
});
},
),
],
);
});
}
}
class ListContent {
final String name;
String notes;
Color color;
ListContent(
this.name,
this.notes,
this.color,
);
}
// ignore: must_be_immutable
class SecondRoute extends StatelessWidget {
String todo;
String titlename;
SecondRoute({super.key, required this.todo, required this.titlename});
@override
Widget build(BuildContext context) {
TextEditingController controller = TextEditingController(text: todo);
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.amber,
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(todo),
),
title: Text(titlename),
),
body: Center(
child: Column(
children: [
TextField(
controller: controller,
maxLines: null,
keyboardType: TextInputType.multiline,
onChanged: (value) {
todo = value;
},
),
],
),
),
);
}
}
Anyone who can help me with my problem?