On navigation, background color changes to black

Question

I'm encountering an issue where the background color of my app changes black when a button is clicked to navigate to another page. I've tried using theme to change the background color in MaterialApp but for some reason it doesn't work. This is my main.dart file

void main() {
  initializeDateFormatting('tr_TR', null).then((_) {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/home": (context) => HomePage(),
        "/": (context) => LoginPage(),
        "/welcome": (context) => WelcomePage(),
        "/calendar": (context) => CalendarPage(),
        "/announcements": (context) => AnnouncementsPage(),
      },
      initialRoute: "/home",
      debugShowCheckedModeBanner: false,
    );
  }
}

In home page, I'm trying to create a navigation to announcements page as below.

InkWell(
  onTap: () {
    setState(() {
      // Navigator.pushNamed(context, '/duyurular');
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AnnouncementsPage(),
        ),
      );
    });
  },
  child: AppText(
    text: "More",
    context: context,
    fontWeight: FontWeight.bold,
    fontSize: responsive.screenWidth / 25.71,
    color: AppColors.darkMagenta,
    fontFamily: 'Poppins',
  ),
),

The result I get when I click on "More" text. Background is black and texts have yellow underlines

Answer 1

Wrap your AnnouncementsPage code inside

Scaffold( body: …your page code

Answer 2

Try wrapping pages with Material widget

class Page extends StatelessWidget {
  const Page({super.key});

  @override
  Widget build(BuildContext context) {
    return const Material(
      child: ...
    );
  }
}