Solution 1 :
From what I understand, it seems that you’d like to animate the button when swiping the Drawer. What you can do here is add onDrawerChanged
on the Scaffold
containing the Drawer
. This should detect the gesture if the Drawer is being opened or closed.
Scaffold(
key: _scaffoldKey,
onDrawerChanged: (onDrawerChanged){
debugPrint('onDrawerChanged? $onDrawerChanged');
// onDrawerChanged is called on changes in drawer direction
// true - gesture that the Drawer is being opened
// false - gesture that the Drawer is being closed
onDrawerChanged
? _animationController.forward()
: _animationController.reverse();
},
...
)
With this setup, _handleOnPressed()
can be removed from being called inside IconButton(onPressed: (){});
Solution 2 :
you can just do like this for drawer Open and then closed
onDrawerChanged: (change) {
setState(() {
isplaying = !isplaying;
isplaying
? animationController.forward()
: animationController.reverse();
});
}
then add this to IconButton onPressed method
onPressed: () {
Scaffold.of(context).openEndDrawer();
}
Problem :
I want to have Animated button icon on AppBar
(thats always visible), to call a Drawer in my app. To have AppBar always visible even while Drawer is opened, i used this method: I had to put AppBar to main Scaffold, then passed a child: Scaffold and put Drawer inside.
I managed to get button working through IF statement and _scaffoldKey.currentState
. So button works and animates from hamburger to arrow while opening and closing Drawer, but I also want to implement animating the button while opening/closing drawer with swiping, or while drawer is opened, by tapping outside drawer. Is there any way to do it ?
I’m kind of beginner in Flutter here is part of my code:
class HomePage extends StatefulWidget {
@override _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
bool isPlaying = false;
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
bool _isDrawerOpen = false;
@override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}
void _handleOnPressed() {
setState(() {
isPlaying = !isPlaying;
isPlaying
? _animationController.forward()
: _animationController.reverse();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
primary: true,
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(
"Drawer animation",
style: TextStyle(
fontSize: 40,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w600,
color: Colors.black45),
),
centerTitle: true,
backgroundColor: Colors.amber,
leading: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: _animationController),
onPressed: () {
if (!_isDrawerOpen) {
_scaffoldKey.currentState.openDrawer();
} else {
Navigator.pop(context);
}
setState(() {
_isDrawerOpen = !_isDrawerOpen;
});
_handleOnPressed();
},
),
),
body: Scaffold(
key: _scaffoldKey,
drawer: Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text("prve"),
),
],
),
),
body: Container(
child: CustomButton(),
),
),
);
}
}
Comments
Comment posted by material.io/components/navigation-drawer
I’m afraid you’re mixing the terms trying to achieve all kinds of component behaviours at once. I would suggest looking into the material specs for a better understanding of how it’s supposed to work: