How to connect drawer to animated icon button in flutter?

Question

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(),
        ),
      ),

    );
  }
}

Answer 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: (){});

Answer 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();
        }