I wanted to make a burger menu using a nav bar to show on the homescreen of my app, to do so I created a nav_bar.dart file and imported it onto my home_screen.dart and my main.dart, I did so by doing import'nav_bar.dart'. Yet my nav bar is not appearing on my appbar of the home_screen.dart,

the code for the nav_bar.dart is as follows:

import 'package:flutter/material.dart';
import 'home_screen.dart';
class NavBar extends StatelessWidget {
  const NavBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text("Wilson Machoco"),
            accountEmail: Text("[email protected]"),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.asset(
                  "assets/user.png",
                  width: 90,
                  height: 90,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.yellowAccent,
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                      'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
            ),
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('Favorites'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Friends'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.share),
            title: Text('Share'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.notifications),
            title: Text('Request'),
            onTap: () => null,
            trailing: ClipOval(
              child: Container(
                  color: Colors.deepOrange,
                  width: 20,
                  height: 20,
                  child: Center(
                    child: Text(
                      "8",
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                  )),
            ),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text('Policies'),
            onTap: () => null,
          ),
          Divider(),
          ListTile(
            title: Text('Exit'),
            leading: Icon(Icons.exit_to_app),
            onTap: () => null,
          ),
        ],
      ),
    );
  }
}

and on my home_screen I did this:

import 'dart:ui';
import 'package:url_launcher/url_launcher.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'nav_bar.dart';


class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavBar(),
      appBar: AppBar(... etc

My app looks like this:

CodePudding user response：

The default button for drawer is appbar's leading and I think your appbar has custom leading, so you need add some config to your custom leading widget. First define new variable like this:

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

then pass it to your scaffold like this:

return Scaffold(
      drawer: NavBar(),
      key: scaffoldKey,
      ...
);

then in your app bar wrap your custom leading widget(I think it is that profile image) with InkWell like this:

leading: InkWell(
      onTap: () {
        scaffoldKey.currentState!.openDrawer();
      },
      child: your leading widge,
    ),

now when you click on image in appbar the Drawer will open.