Im making my first TODO app, and im struggling with updating my app after user made a new note.
I want a child class(HomeBody
) of HomePage
be updated after user click save and Navigator.pop()
from NewNotePage
.
Here is my parent class HomePage
form where I want to update child and child class is HomeBody
as a body of Scaffold.
class HomePage extends StatefulWidget {
const HomePage({super.key});
static const String routeName = '/home';
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
...
// ----------------------Center-------------------------------
body: const HomeBody(),
// ----------------------BOTTOM--------------------------------
bottomNavigationBar: const HomeBottomAppBar(),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, NewNotePage.routeName).then((_) {
setState(() {});
print("Action after Navigator.pop()");
});
},
child: const Icon(Icons.create),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
Child class looks like this, I want to update this class to show new note that user made.
class HomeBody extends StatefulWidget {
const HomeBody({super.key});
@override
State<HomeBody> createState() => _HomeBodyState();
}
class _HomeBodyState extends State<HomeBody> {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(5),
children: <Widget>[
if (notesList.isNotEmpty)
for (var note in notesList)
NoteWidget(
note: note,
onDeletePressed: () {
DataDB.delete(note: note, context: context).then((value) {
setState(() {});
});
})
else ...[
Container(
alignment:
AlignmentGeometry.lerp(Alignment.center, Alignment.center, 0),
child: Text(
"Add your first note",
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(color: Colors.black.withOpacity(0.5)),
),
),
],
],
);
}
}
And here is state of NewNotePage
where user make note and save it and page pop back to HomePage
.
@override
Widget build(BuildContext context) {
return Scaffold(
...
// ----------------------Center-------------------------------
body: NewNoteBody(controller: contentController),
// ----------------------BOTTOM--------------------------------
bottomNavigationBar: const BottomAppBar(
notchMargin: 4,
clipBehavior: Clip.antiAlias,
),
floatingActionButton: FloatingActionButton(
tooltip: 'save',
onPressed: () async {
if (titleController.text.isNotEmpty ||
contentController.text.isNotEmpty) {
NoteModel note = NoteModel(
title: titleController.text,
content: contentController.text,
);
await DataDB.addNote(note: note).then((value) {
Navigator.pop(context);
});
} else {
Navigator.pop(context);
}
},
child: const Icon(
Icons.done_rounded,
size: 32,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
);
}