How do i change appbar when a button is clicked flutter? - 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;
// }
),
);
}
}
Your custom AppBar file remains the same.
GetX controller File:
class AppBarController extends GetxController {
Rx<bool> isChangeAppBar = false.obs;
}