我已经有了一个屏幕和一个浮动菜单。

Scaffold(
      drawer: SideBar(),
      body: isLoading..
..
..
CircularMenuItem(
          //icon: Icons.settings,
          image: Image.asset(
            "assets/images/icons/settings.png",
            scale: 13,
          ),
          onTap: () {
            //callback
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => SideBar()));
            // toggleSidebar();
          },
          color: Colors.transparent, 
        ),
..

当从这个浮动菜单中点击一个项目时，我希望一个侧边栏从左到右显示，占据60%的屏幕宽度（一个典型的侧边栏）.但是当我这样做的时候，它显示的就像一个页面一样，占据了整个屏幕，没有动画

class SideBar extends StatefulWidget {
  @override
  State<SideBar> createState() => _SideBarState();
}

class _SideBarState extends State<SideBar> {
  // const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final User? user = FirebaseAuth.instance.currentUser;
    final screenwidth = MediaQuery.of(context).size.width;
    return Drawer(
      width: screenwidth * .5,
      child: ListView(
        children: [
          UserAccountsDrawerHeader(
            accountName: Text(user?.displayName ?? ''),
            accountEmail: Text(user?.email ?? ''),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(child: Icon(Icons.person)),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                      'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
            ),
          ),
        ],
      ),
    );
  }
}

如何正常显示？