Flutter: Navigator operation requested with a context that does not include a Navigator - flutter

Question

when I click ElevatedButton(), Navigator.push() occurs Error: Navigator operation requested with a context that does not include a Navigator. But I make that ElevatedButton() in other dart file as widget, and I import It. It works well. What's the difference betweent make navigator button inside in code and import navigator button.
class GuideMainScreen extends StatelessWidget {
GuideMainScreen({super.key});
final _controller = PageController();
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: const Color(0xFFF4EDDB),
appBar: const AppbarSkip(),
body: Column(
children: [
SizedBox(
height: 570,
child: PageView(
controller: _controller,
children: const [
GuideHowScreen(),
GuideFocusScreen(),
GuideBreakScreen(),
],
),
),
Row(
children: [
const Padding(padding: EdgeInsets.only(left: 40)),
SmoothPageIndicator(
controller: _controller,
count: 3,
effect: const ExpandingDotsEffect(
activeDotColor: Color(0xFFE7626C),
dotColor: Color(
0xFF232B55,
),
),
),
const SizedBox()
],
),
const Padding(
padding: EdgeInsets.symmetric(
vertical: 45,
),
),
const SizedBox(
width: 181,
height: 49,
// Error
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
);
},
child: const Text(
'SKIP',
style: TextStyle(color: Colors.white),
),
);
// Works Well
child: SkipButton(),
),
],
),
),
);
}
}
this is SkiptButton() Widget which I write code in other dart file
import 'package:flutter/material.dart';
class SkipButton extends StatelessWidget {
const SkipButton({super.key});
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
);
},
child: const Text(
'SKIP',
style: TextStyle(color: Colors.white),
),
);
}
}