How can I catch the opening and closing of the drawer in flutter? In principle, two objects must be are used for this purpose: DrawerController, which "holds" the drawer and the drawerCallback. drawerCallback should track the opening and closing of the drawer, but the code that is discussed at https://github.com/flutter/flutter/issues/21272 and https://github.com/flutter/flutter/issues/23630 does not works. Anyone can advise something?
Asked
Active
Viewed 2,530 times
3
-
Did you find any solution? I am facing the same issue. – Akruti Nov 20 '18 at 09:01
1 Answers
5
Update 2021-12:
Scaffold(
drawer: DrawerWidget(),
onDrawerChanged: (isDrawerOpen) {
if(isDrawerOpen) {
//drawer is open
} else {
//drawer is close
}
},
body: bodyWidget(),
)
You can first refer to other people's replies on stackoverflow here
My solve:
get Drawer status on DrawerWidget
initState() : open drawer
dispose() : close drawer
Stream drawer status by DrawerService Provider
see full code
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:provider/provider.dart';
void main() {
runApp(
MultiProvider(
providers: [
Provider(create: (_) => DrawerService()),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DrawerService _drawerService;
String drawerStatus = 'close';
@override
void initState() {
super.initState();
_drawerService = Provider.of(context, listen: false);
_listenDrawerService();
}
_listenDrawerService() {
_drawerService.status.listen((status) {
if(status) {
drawerStatus = 'open';
} else {
drawerStatus = 'close';
}
setState(() { });
});
}
@override
Widget build(BuildContext context) {
Color bgColor = Colors.yellow;
if(drawerStatus == 'open') {
bgColor = Colors.red;
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: DrawerWidget(),
body: Container(
decoration: BoxDecoration(color: bgColor),
height: 300,
child: Center(child: Text(drawerStatus),),
),
);
}
}
class DrawerWidget extends StatefulWidget {
@override
_DrawerWidgetState createState() => _DrawerWidgetState();
}
class _DrawerWidgetState extends State<DrawerWidget> {
DrawerService _drawerService;
@override
void initState() {
super.initState();
_drawerService = Provider.of(context, listen: false);
_drawerService.setIsOpenStatus(true);
}
@override
Widget build(BuildContext context) {
return Drawer(
child: Center(child: Text('drawer'),),
);
}
@override
void dispose() {
super.dispose();
_drawerService.setIsOpenStatus(false);
}
}
class DrawerService {
StreamController<bool> _statusController = StreamController.broadcast();
Stream<bool> get status => _statusController.stream;
setIsOpenStatus(bool openStatus) {
_statusController.add(openStatus);
}
}

Hưng Trịnh
- 947
- 1
- 12
- 23
-
This works for me! Another note that I tried another method by wrapping the drawer with a controller like `DrawerController(child: Drawer(), drawerCallback: myDrawerListener)`, but it doesn't work because the `Scalfold` itself already has a `DrawerController`. So nested `DrawerController` yields undefined behavior that only the screen is masked grey, but no drawer is shown. – Ludy Su Aug 18 '20 at 04:02