Flutter : Drawer without seeing the white page

Question

When I click on the Three Line icon in the AppBar, I first go to a blank white page. Then when I pull the mouse from the left on this page, I see "Drawer". The white page confuses me. What I want is; That the Drawer comes from the left as I click on the three lines in the AppBar.

main.dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        // body: const NavigationDrawer(),
        drawer: const NavigationDrawer(),
      ),
    );
  }
}

api.dart

Future<List<Menu>> fetchMenus() async {
  final response =
  await http.get(Uri.parse('http://myUrl:3355/'));
  if (response.statusCode == 200) {
    var getMenusData = json.decode(response.body) as List;
    var listMenus = getMenusData.map((i) => Menu.fromJson(i)).toList();
    return listMenus;
  } else {
    throw Exception('Failed to load Menus');
  }
}

navigation.dart

class NavigationDrawer extends StatefulWidget {
  const NavigationDrawer({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return NavigationDrawerState();
  }
}

class NavigationDrawerState extends State<NavigationDrawer> {
  late Future<List<Menu>> listMenus;

  @override
  void initState() {
    super.initState();
    listMenus = fetchMenus();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: [
            buildHeader(),
            buildMenu(),
          ],
        ),
      ),
    );
  }

  Widget buildHeader() {
    return const Center(
      child: Card(
        child: SizedBox(
          width: 300,
          height: 100,
          child: Center(child: Text('Elevated Card')),
        ),
      ),
    );
  }

Widget buildMenu() {
  late Future<List<Menu>> listMenus;
  listMenus = fetchMenus();
  return Expanded(
      child: FutureBuilder<List<Menu>>(
          future: listMenus,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.separated(
                  itemBuilder: (context, index) {
                    var menu = (snapshot.data as List<Menu>)[index];
                    return Container(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          // Text(menu.name),
                          const SizedBox(height: 5),
                          Text(menu.folder),
                        ],
                      ),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return const Divider();
                  },
                  itemCount: (snapshot.data as List<Menu>).length);
            } else if (snapshot.hasError) {
              return Center(
                child: Text("${snapshot.error}"),
              );
            }
            return const Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.cyanAccent,
              ),
            );
          },
        ));
}
}

Answer 1

I don't think that you need to return a scaffold.

try remove return scaffold and only return Drawer

This:

return Scaffold(
  drawer: Drawer(
    child: Column(
      children: [
        buildHeader(),
        buildMenu(),
      ],
    ),
  ),
);

To this:

return Drawer(
    child: Column(
      children: [
        buildHeader(),
        buildMenu(),
      ],
    ),
  );