Flutter: Routing to a different .dart file failing. Returns a black screen

Question

I have created a social media app and now i am trying t customize my App by and i have added a Search, Chat icons and i would like the search icon to route to the Search page with exists in the App. I implemented MaterialPageRoute but it just returns a black screen (with a thin green border).

No error or log is made in the Debug Console

Flutter Doctor Report

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.19041.630], locale en-GB)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.51.1)
[√] Connected device (1 available)

• No issues found

Header Widget Code: Right now i am trying to add route to the Icon(Icons.search), icon

import 'package:flutter/material.dart';
import 'package:findemed/pages/search.dart';


class Search extends StatefulWidget {
  @override
  __SearchState createState() => __SearchState();
}

class __SearchState extends State<Search> {
  Future<List> users;
  

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

AppBar header(context,
    {bool isAppTitle = false,
    String titleText,
    removeBackButton = false}) {
  return AppBar(
//APPBAR CODE WITH ICONS
    automaticallyImplyLeading: removeBackButton ? false : true,
    title: 
        Text(isAppTitle ? "FindeMed" : titleText),
    leading: GestureDetector(
      onTap: () {/* Write listener code here */},
      child: Icon(
        Icons.menu, // add custom icons also
      ),
    ),

    actions: <Widget>[
      Padding(
        padding: EdgeInsets.only(right: 20.0),
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Search()
                  ),
                );
              },
            child: Icon(
              Icons.search,
              size: 25.0,
            ),
          )),
      Padding(
          padding: EdgeInsets.only(right: 20.0),
          child: GestureDetector(
            onTap: () {},
            child: Icon(
              Icons.chat_bubble_outline,
              size: 20.0,
            ),
          )),
      Padding(
          padding: EdgeInsets.only(right: 20.0),
          child: GestureDetector(
            onTap: () {},
            child: Icon(Icons.notifications),
          )),
    ],
  );
}

Answer 1

Solved it.

The issue was with the stateless n stateful widget classes

class Search extends StatefulWidget {
  @override
  __SearchState createState() => __SearchState();
}

class __SearchState extends State<Search> {
  Future<List> users;

The issues with the name Search which i think then conflicted with routing to the Search page. I simply changed it to Header and it works even with an empty argument

class Header extends StatefulWidget {
  @override
  __HeaderState createState() => __HeaderState();
}

class __HeaderState extends State<Header> {
  Future<List> users;

Unlike as suggested the routing will still work even without a Widget declared i.e.

Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => Search(),
              ),

Answer 2

That's because you don't have nothing in your Search widget (just a Container widget).

Try returning a Scaffold instead with some body set. By default, black screen is "normal" for an empty view.