How to change AppBar Title in a bottom navigation screen while switching the screen?-CodePudding

I Have created a Bottom NavigationBar Screen and i want change the AppBar title as the screen changes from navigation screen tab. Here i have created method in it a switch case to change the AppBar title. but it throws an error : Exception has occurred. _CastError (type 'String' is not a subtype of type 'RxString' in type cast). i also tried removing cast 'as RxString' and changing the appBartitle to String.

Navigation Screen

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:onyx/app/modules/location/views/location_view.dart';

import 'package:onyx/app/modules/offers/views/offers_view.dart';
import 'package:onyx/app/modules/setting/views/setting_view.dart';

import 'package:onyx/custom_widgets/drawer.dart';
import 'package:onyx/style/style.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  
  final screens = [
    const OffersView(
      isAppBar: false,
    ),
    const OffersView(
      isAppBar: false,
    ),
    LocationView(),
    SettingView()
  ];
  HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Obx(() => Text(
                controller.appBartitle.value,
                style: const TextStyle(color: Colors.black),
              ))),
      body: Obx(
        () => IndexedStack(
            index: controller.selectedtIndex.value, children: screens),
      ),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          showSelectedLabels: true,
          backgroundColor: colorPrimary,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.white54,
          currentIndex: controller.selectedtIndex.value,
          onTap: (index) => controller.onTapNavigationBar(index),
          items: const [
            BottomNavigationBarItem(
                icon: Icon(Icons.home_outlined), label: "Home"),
            BottomNavigationBarItem(
                icon: Icon(Icons.local_offer_outlined), label: "Offers"),
            BottomNavigationBarItem(
                icon: Icon(Icons.location_on_outlined), label: "Location"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings_outlined), label: "Settings"),
          ],
        ),
      ),
      drawer: const CDrawer(),
    );
  }
}

Controller

import 'package:get/get.dart';
import 'package:onyx/app/modules/home/views/home_view.dart';

class HomeController extends GetxController {
  var selectedtIndex = 0.obs;
  var appBartitle = "1t".obs;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }

  onTapNavigationBar(index) {
    selectedtIndex.value = index;
    switch (index) {
      case 0:
        {
          appBartitle = '1t' as RxString;
        }
        break;
      case 1:
        {
          appBartitle = '2t' as RxString;
        }
        break;
      case 2:
        {
          appBartitle = '3t' as RxString;
        }
        break;
      case 3:
        {
          appBartitle = '4t' as RxString;
        }
        break;
    }
  }
}

CodePudding user response：

In onTapNavigationBar method you have only changed page index and not update title on that method so just replace controller.onTapNavigationBar(index) with
controller.onTabChanged(index) it will solve your issue.

CodePudding user response：

Your HomeView class is fine. There's need some changes in HomeController class. I have corrected and it working fine as expected. The code is given below.

class HomeController extends GetxController {
  var selectedtIndex = 0.obs;
  var appBartitle = "".obs;

  @override
  void onInit() {
    super.onInit();
  }

  onTapNavigationBar(int index) {
    selectedtIndex.value = index;
    switch (index) {
      case 0:
        appBartitle.value = '1t';
        break;
      case 1:
        appBartitle.value = '2t';
        break;
      case 2:
        appBartitle.value = '3t';
        break;
      case 3:
        appBartitle.value = '4t';
        break;
    }
  }

  void onTabChanged(int index) {
    selectedtIndex.value = index;
  }
}

CodePudding user response：

I have also come across similar requirement.

Best choice to achieve this is to make use of providers in flutter along with ChangeNotifierProvider.

You can use https://pub.dev/packages/provider

Please refer : https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple