[英]How to connect drawer to animated icon button in flutter?
I want to have Animated button icon on AppBar
(thats always visible), to call a Drawer in my app.我想在
AppBar
上设置动画按钮图标(始终可见),以便在我的应用程序中调用抽屉。 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.为了让 AppBar 即使在打开 Drawer 时也始终可见,我使用了这种方法:我必须将 AppBar 放到主 Scaffold 中,然后传递一个子项:Scaffold 并将 Drawer 放入其中。
I managed to get button working through IF statement and _scaffoldKey.currentState
.我设法让按钮通过 IF 语句和
_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:我是 Flutter 的初学者,这是我的部分代码:
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(),
),
),
);
}
}
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
.您可以在这里做的是在包含
Drawer
的Scaffold
上添加onDrawerChanged
。 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: (){});
通过这个设置,
_handleOnPressed()
可以从在IconButton(onPressed: (){});
内部调用中移除IconButton(onPressed: (){});
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然后将其添加到IconButton onPressed方法
onPressed: () {
Scaffold.of(context).openEndDrawer();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.