How do i change appbar when a button is clicked flutter?

Question

i have a widget with an AppBar:

class CustomersView extends StatefulWidget {
  @override
  State<CustomersView> createState() => _CustomersViewState();
}

class _CustomersViewState extends State<CustomersView> {

  @override
  Widget build(BuildContext context) {
    //final controller = Get.put(EServicesController());
    return Scaffold(
      appBar: AppBar(
      toolbarHeight: 60,
      backgroundColor: Colors.white,
      title: Text(
        "Customers".tr,
        style: GoogleFonts.poppins(
            color: Color(0xff000000),
            fontSize: 20,
            fontWeight: FontWeight.w600),
      ),
      actions: [
        SearchButtonWidget(),
        SettingsButtonWidget(),
      ],
      centerTitle: false,
      elevation: 0,
      automaticallyImplyLeading: false,
      leadingWidth: 15,
      // leading: new IconButton(
      //   icon: new Icon(Icons.arrow_back_ios, color: Color(0xff3498DB)),
      //   onPressed: () => {Get.back()},
      // ),
    ),
      body: RefreshIndicator(
        onRefresh: () async {
          // Get.find<LaravelApiClient>().forceRefresh();
          // await controller.refreshNotifications(showMessage: true);
          // Get.find<LaravelApiClient>().unForceRefresh();
        },
        child: ListView(
          primary: true,
          children: <Widget>[
            mainHeader(),
            SizedBox(
              height: 10,
            ),
            CustomersCategoriesBuilder(current: current),
          ],
        ),
      ),
      //floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

      bottomNavigationBar: current == 0 ? SizedBox() : MessageCustomersButton(),
    );
  }
}

And i have another customized AppBar in another widget :

class MessageCustomersAppBar extends StatelessWidget with PreferredSizeWidget {
  final bool isSecondStyleAppBar;
  const MessageCustomersAppBar(this.isSecondStyleAppBar, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      toolbarHeight: 60,
      backgroundColor: Colors.white,
      title: Text(
        "Customers".tr,
        style: GoogleFonts.poppins(
            color: Color(0xff000000),
            fontSize: 20,
            fontWeight: FontWeight.w600),
      ),
      actions: [
        // SearchButtonWidget(),
        // SettingsButtonWidget(),
      ],
      centerTitle: false,
      elevation: 0,
      automaticallyImplyLeading: false,
      leadingWidth: 15,
       leading: new IconButton(
         icon: new Icon(Icons.arrow_back_ios, color: Color(0xff3498DB)),
         onPressed: () => {Get.back()},
       ),
    );
  }
   @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

In the initial widget, i have a bottomNavigationBar that has a button MessageCustomersButton() and in the second CustomAppBar widget i have a leading

I want to switch AppBar to the CustomAppBar when this button is pressed ( i am using Getx ) & switch back to the Original AppBar when the leading button is pressed.

I have tried managing state myself but it looks like i am getting it wrong for the past days now.

Please i need help. Thank you!

Answer 1

You can change the AppBar in GetX using the OBX method. Below is the code for implementing those things.

1.View File

class CustomersView extends StatefulWidget {
  @override
  State<CustomersView> createState() => _CustomersViewState();
}

class _CustomersViewState extends State<CustomersView> {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(AppBarController());
    return Obx(
      () => Scaffold(
        appBar: controller.isChangeAppBar.value
            ? MessageCustomersAppBar()
            : AppBar(
                toolbarHeight: 60,
                backgroundColor: Colors.white,
                title: Text(
                  "Customers".tr,
                  style: GoogleFonts.poppins(
                      color: Color(0xff000000),
                      fontSize: 20,
                      fontWeight: FontWeight.w600),
                ),
                actions: [
                  SearchButtonWidget(),
                  SettingsButtonWidget(),
                ],
                centerTitle: false,
                elevation: 0,
                automaticallyImplyLeading: false,
                leadingWidth: 15,
              ),
        body: RefreshIndicator(
          onRefresh: () async {},
          child: ListView(
            primary: true,
            children: <Widget>[
              mainHeader(),
              SizedBox(
                height: 10,
              ),
              CustomersCategoriesBuilder(current: current),
            ],
          ),
        ),
        bottomNavigationBar:
            current == 0 ? SizedBox() : MessageCustomersButton(),
        //here's the ontap method for the button
        //   () {
        // controller.isChangeAppBar.value = !controller.isChangeAppBar.value;
        // }
      ),
    );
  }
}

2. Your custom AppBar file remains the same.

3. GetX controller File:

class AppBarController extends GetxController {
  Rx<bool> isChangeAppBar = false.obs;
}