Easy localization package translation is not working in Bottom Naviagtion Bar items label flutter dart

Question

here below code of main screen class that contains bottom Navigation Bar items , my issue is except this bottom nav bar labels all other strings translations are working.

class Main extends StatefulWidget {
}

class _MainState extends State<Main> {
   List<BottomNavigationBarItem> items = [
     BottomNavigationBarItem(
       icon: Image.asset(icons[0]),
       label: 'home'.tr(),
     ),
    BottomNavigationBarItem(
       icon: Image.asset(icons[5]),
       label: 'comments'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[1]),
       label: 'settings'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[2]),
       label: 'tools'.tr(),
     ),
   ];

  @override
  Widget build(BuildContext context) {
     return BlocBuilder<MainBloc, MainState>(
      builder: (context, state) {
        return Scaffold(
          bottomNavigationBar: Container(
            color: Colors.white,
            child: Row(
              children: items.asMap().entries.where((element) => 
  state.itemShown![element.key]).map((element) {
                final index = element.key;
                final item = element.value;
                final isSelected = state.actualIndex == index;
                return InkWell(
                  onTap: () {
                  
                    },
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 50.0,top: 16),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected
                            ? ThemeManager.colors
                            : Colors.white,
                        borderRadius: BorderRadius.circular(20.0),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 25, vertical: 15),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Image.asset(
                            icons[index],
                            fit: BoxFit.cover,
                            width: 
                            MediaQuery.of(context).size.width / 15,
                            color: isSelected
                                ? Colors.white
                                : Colors.black54,
                          ),
                          Text(
                            item.label!,
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black,
                              fontWeight: FontWeight.w400,
                             
                              // Text color
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        );

      },
    );
  }
}

here below main.dart class code

Future<void>main() async {
  await runZonedGuarded (
    () async{
        WidgetsFlutterBinding.ensureInitialized();
        await EasyLocalization.ensureInitialized();
        runApp((EasyLocalization(
        supportedLocales: const [Locale('en', 'US'),Locale('es', 'ES')],
        path: 'assets/translations',
        fallbackLocale: const Locale('en', 'US'),
        child: const MyApp())));
      },
  );
}

/// inside material app
                MaterialApp(
                debugShowCheckedModeBanner: false,
                onGenerateRoute: Routes.generateRoute,
                theme: ThemeManager.lightTheme,
                localizationsDelegates: context.localizationDelegates,
                supportedLocales: context.supportedLocales,
                locale: context.locale,
                initialRoute:Routes.splashScreen,
             ),

here i am using a drop down for selecting the language translation , after selecting the selected language i am calling this function.

on the onTap function i am using this code.

LocalizationChecker.changeLanguage(context,newValue);

Here below the Localization Checker class

class LocalizationChecker {
  static changeLanguage(BuildContext context, String language) {
     Locale? currentLocal = EasyLocalization.of(context)!.currentLocale;
    if (language == 'English') {
      EasyLocalization.of(context)!.setLocale(const Locale('es', 'ES'));
    } else {
      EasyLocalization.of(context)!.setLocale(const Locale('en', 'US'));
    }
  }
}

My main issue is after clicking this button localization is working on all screens except the bottom navigation bar.

Answer 1

Do not use .tr() inside the state, use in inside build, in order for the translation to change, the widget needs to be rendered again, and since it is inside the state, it cannot call .tr() again.

List<BottomNavigationBarItem> items = [
     BottomNavigationBarItem(
       icon: Image.asset(icons[0]),
       label: 'home',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[1]),
       label: 'settings',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[2]),
       label: 'tools',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[3]),
       label: 'profile',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[5]),
       label: 'comments',
     ),
   ];

....

Text(
   item.label!.tr(),
   style: TextStyle(
     color: isSelected ? Colors.white : Colors.black,
     fontWeight: FontWeight.w400,
     fontSize: 12,
     // Text color
   ),
 ),