Search code examples
flutterflutter-layoutappbarflutter-animation

How to change AppBar text during backdrop open/close flutter


I implemented backdrop in my app. I want to change AppBar text during backdrop open/close. I tried with Boolean isOpen make it true/false during IconButton onPressed it working, but i want to know which is the perfect way. Is any api to detect backdrop open/close ?.

    import 'package:expense_manager_app/widget/navigation_panel.dart';
import 'package:flutter/material.dart';

class BackDropPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BackDropState();
  }
}

class _BackDropState extends State<BackDropPage>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  var mTitle = "Home";
  var mIsOpen = false;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 100), value: 1.0);
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  bool get isPanelVisible {
    final AnimationStatus status = controller.status;
    return status == AnimationStatus.completed ||
        status == AnimationStatus.forward;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$mTitle'),
        elevation: 0.0,
        leading: new IconButton(
          onPressed: () {
            controller.fling(velocity: isPanelVisible ? -1.0 : 1.0);
            setState(() {
              if (mIsOpen) {
                mIsOpen = false;
                mTitle = "Home";
              } else {
                mTitle = "Menu";
                mIsOpen = true;
              }
            });
          },
          icon: new AnimatedIcon(
            icon: AnimatedIcons.close_menu,
            progress: controller.view,
          ),
        ),
      ),
      body: NavigationPanelPage(controller: controller),
    );
  }
}

Solution

  • Finally I done myself using isPanelVisible bool.

    appBar: AppBar(
        title: Text('$mTitle'),
        elevation: 0.0,
        leading: new IconButton(
          onPressed: () {
            controller.fling(velocity: isPanelVisible ? -1.0 : 1.0);
            setState(() {
              if (isPanelVisible) {
                mTitle = "Home";
              } else {
                mTitle = "Menu";
              }
            });
          },
          icon: new AnimatedIcon(
            icon: AnimatedIcons.close_menu,
            progress: controller.view,
          ),
        ),
      ),