Flutter Web中未显示材料设计抽屉



我正试图弄清楚为什么抽屉小部件没有出现在Flutter网页中。

import 'package:responsive_builder/responsive_builder.dart';

class HomeLayout extends StatelessWidget {
const HomeLayout({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) => Scaffold(
drawer: sizingInformation.deviceScreenType == DeviceScreenType.desktop
? null
: NavigationDrawer(),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: <Widget>[
NavigationBar(),
Expanded(
child: Navigator(
key: locator<NavigationService>().navigatorKey,
onGenerateRoute: generateRoute,
initialRoute: HomeRoute,
),
)
],
),
),
),
);
}

class NavigationDrawer extends StatelessWidget {
const NavigationDrawer({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: SizedBox.shrink(),
decoration: BoxDecoration(
color: Color(0xff2acccc),
),
),
DrawerItem('Login', LoginToAdmin),
],
),
);
}
}

class NavigationBar extends StatelessWidget {
const NavigationBar({ Key key })  :  super(key: key);
@override
Widget build(BuildContext context) {
return ScreenTypeLayout(
mobile: NavigationBarMobile(),
tablet: NavigationBarTabletDesktop(),
);
}
}

class NavigationBarMobile extends StatelessWidget {
const NavigationBarMobile({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 80,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
)),
Expanded(
child: NavBarLogo(),
),
Expanded(
child: SizedBox.shrink(),
),
],
),
);
}
}

我正在试用Flutter Web,并使用";flutter run-d chrome";当我点击汉堡菜单时,除了连锁反应之外,什么都没发生。我很确定我在我的ResponsiveBuilder((小部件中做错了什么,但我不清楚那是什么

这种令人难以置信的笔证明了它应该工作代码笔

任何帮助都将非常感谢

您需要在Scaffold()中添加一个AppBar(),以便抽屉可见,类似于以下内容:

return Scaffold(
drawer: const MyDrawer(),
appBar: AppBar(
title: const Text('Hello'),
));

最新更新