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

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!

CodePudding user response：

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;
        // }
      ),
    );
  }
}

Your custom AppBar file remains the same.
GetX controller File:

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