'How to update todo item?
When clicking on a todo item, an edit window opens, where the user can make changes and save them. I wrote an update function in ChangeNotifier, but when I click on save, an error pops up: This happen because you used a 'BuildCOntext' that does not include the provider of you choice. But the rest of the code in the provider works. Only the update function does not work. What could be the problem? My ChangeNotifier:
class ListModel extends ChangeNotifier {
List<EventModel> eventList = [];
void addEventToList() {
EventModel eventModel = EventModel(
title: 'Event title ${eventList.length + 1}',
detail: 'Event text ${eventList.length + 1}',
id: '${eventList.length + 1}',
);
eventList.add(eventModel);
notifyListeners();
}
EventModel? getEvent(String? id) {
return eventList.firstOrNullWhere((event) => event.id == id);
}
void updateList(EventModel eventModel, String title, String detail) {
eventModel.title = title;
eventModel.detail = detail;
notifyListeners();
}
}
My modal window:
class EditEventBottomSheet extends StatefulWidget {
final EventModel event;
const EditEventBottomSheet({Key? key, required this.event}) : super(key: key);
@override
State<EditEventBottomSheet> createState() => _EditEventBottomSheetState();
}
class _EditEventBottomSheetState extends State<EditEventBottomSheet> {
late final titleCntrl = TextEditingController(text: widget.event.title);
late final detailCntrl = TextEditingController(text: widget.event.detail);
@override
Widget build(BuildContext context) {
return Container(
height: 300,
color: Colors.amber,
child: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Change Event',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
TextField(
controller: titleCntrl,
),
const SizedBox(height: 10),
TextFormField(
controller: detailCntrl,
),
const SizedBox(height: 10),
ElevatedButton(
child: const Text('Save Edits'),
onPressed: () {
Provider.of<ListModel>(context, listen: false).updateList(
widget.event, titleCntrl.text, detailCntrl.text);
// widget.event.title = titleCntrl.text;
Navigator.pop(context);
},
),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
),
);
}
}
My main.dart:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ChangeNotifierProvider(
create: (BuildContext context) => ListModel(),
child: const HomeScreen(),
),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
