Updating the list view items inside drawer - flutter

Question

This is a single page application.
I have created a drawer inside the Scaffold of HomePage. There are three list tile items in the list view below the title.
When I click the list tile I was able to change the title of the drawer through the onTap method.
But how can I replace the present list tile items with new list tile items after clicking any of the present list tile items.
In general how can I update the list tile items after pressing on any of the items in drawer
Before clicking an item
After clicking change font, the list is unchanged
What I want after clicking change font
I tried making a new function that returns a list view and called it in the setState inside onTap and also calling outside setState but inside the onTap

Answer 1

I did a simple sample here, you can check it out if it satisfies your need.Simple Drawer
you can run it on dart pad as well
Dart pad
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(),
drawer: const Drawer(child: MyDrawer()),
body: Center(
child: MyWidget(),
),
),
);
}
}
enum MenuItem {
font("Change Font",
['Commic Sans', 'Product Sans', 'Monserrat', 'ubuntu', 'unbounded']),
theme("Change Theme", ['dark', 'light']),
metrics("Change Metrics", ['small', 'medium', 'large']);
final String label;
final List<String> items;
const MenuItem(this.label, this.items);
}
class MyDrawer extends StatefulWidget {
const MyDrawer({super.key});
#override
State<MyDrawer> createState() => _MyDrawerState();
}
class _MyDrawerState extends State<MyDrawer> {
MenuItem? selectedMenu;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
const SizedBox(height: 20),
Text(
'Settings',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 60),
Container(height: 1.0, color: Colors.grey),
const SizedBox(height: 60),
// if a menu item is selected, display its sub items
if (selectedMenu != null)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
BackButton(onPressed: (){
setState(() {
selectedMenu = null;
});
},),
for (var item in selectedMenu!.items)
InkWell(
onTap: () {
print(item);
},
child: Padding(
padding: const EdgeInsets.all(10),
child: Text(
item,
style: Theme.of(context).textTheme.bodySmall,
)))
])
else
for (var item in MenuItem.values)
InkWell(
onTap: () {
setState(() {
selectedMenu = item;
});
},
child: Padding(
padding: const EdgeInsets.all(10),
child: Text(
item.label,
style: Theme.of(context).textTheme.bodySmall,
)))
])));
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Text(
'Hello, World!',
style: Theme.of(context).textTheme.headlineSmall,
);
}
}