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.
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
),
),