How to call seperate file dart - flutter

Question

I want to make a condition when I press the button, it will shows pop up. But, beacuse I don't want the code to be long, I create the method on the other file. Unfortunately, the button did not respond anything.
This is where I put the method.
class AddAreaItem extends StatelessWidget {
const AddAreaItem({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: popUpDialog(context),
);
}
popUpDialog(BuildContext context) {
TextEditingController customController = TextEditingController();
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Add Area'),
content: TextField(
controller: customController,
decoration: const InputDecoration(hintText: 'Area Name'),
),
actions: [
MaterialButton(
child: const Text('Add Area'),
onPressed: () {},
),
],
);
});
}
}
And this is where I call the method.
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 550, right: 55),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor:
const Color.fromARGB(229, 58, 0, 229),
minimumSize: const Size(50, 50)),
child: Row(
children: const [
Icon(Icons.add_box_outlined),
SizedBox(
width: 15,
),
Text('Add New Area'),
],
),
onPressed: () {
const AddAreaItem(); // <----- AddAreaItem class from seperate file
},
Any suggestion what should I do, guys?
This is the folder
This is widget tree

Answer 1

You can't call a Widget in onPressed, you should call the function directly
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 550, right: 55),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color.fromARGB(229, 58, 0, 229),
minimumSize: const Size(50, 50)),
child: Row(
children: const [
Icon(Icons.add_box_outlined),
SizedBox(
width: 15,
),
Text('Add New Area'),
],
),
onPressed: () {
popUpDialog(context); // <----- Function from seperate file
},
)))
and in the seperate file
popUpDialog(BuildContext context) {
TextEditingController customController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Add Area'),
content: TextField(
controller: customController,
decoration: const InputDecoration(hintText: 'Area Name'),
),
actions: [
MaterialButton(
child: const Text('Add Area'),
onPressed: () {},
),
],
);
});
}