Flutter: how to translate tabs on BottomNavigationBarItem - flutter

Question

I'm new to Flutter (and the Dart programming language) and I'm struggling with translating the tabs on the BottomNavigationBarItem.
I'm currently basing my code heavily on Andrea Bizzotto's Bottom Navigation Bar with Multiple Navigators.
Here's what I have so far:
Setup:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CovidSafe extended',
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const <Locale>[
Locale('nl'),
Locale('fr'),
Locale('de'),
Locale('en'),
],
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const App(),
);
}
}
class App extends StatefulWidget {
const App({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => AppState();
}
class AppState extends State<App> {
var _currentTab = TabItem.red;
final _navigatorKeys = {
TabItem.red: GlobalKey<NavigatorState>(),
TabItem.green: GlobalKey<NavigatorState>(),
TabItem.blue: GlobalKey<NavigatorState>(),
};
...
}
It uses a TabItem object, which is an enumerable, which has 2 properties: tabName and activeTabColor:
enum TabItem { red, green, blue }
const Map<TabItem, String> tabName = {
TabItem.red: 'red',
TabItem.green: 'green',
TabItem.blue: 'blue',
};
const Map<TabItem, MaterialColor> activeTabColor = {
TabItem.red: Colors.red,
TabItem.green: Colors.green,
TabItem.blue: Colors.blue,
};
The navbar items get built from the _buildItem function inside the BottomNavigation class, like so:
class BottomNavigation extends StatelessWidget {
const BottomNavigation(
{Key? key, required this.currentTab, required this.onSelectTab})
: super(key: key);
final TabItem currentTab;
final ValueChanged<TabItem> onSelectTab;
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
_buildItem(TabItem.red, context),
_buildItem(TabItem.green, context),
_buildItem(TabItem.blue, context),
],
onTap: (index) => onSelectTab(
TabItem.values[index],
),
currentIndex: currentTab.index,
selectedItemColor: activeTabColor[currentTab]!,
);
}
BottomNavigationBarItem _buildItem(TabItem tabItem, BuildContext context) {
return BottomNavigationBarItem(
icon: Icon(
Icons.layers,
color: _colorTabMatching(tabItem),
),
// I think this is where I need to somehow translate the tabName
label: tabName[tabItem],
);
}
Color _colorTabMatching(TabItem item) {
return currentTab == item ? activeTabColor[item]! : Colors.grey;
}
}
I've tried using the following code to translate the label/tabName:
// Option 1:
// won't work because "there's no getter for tabName"
label: AppLocalizations.of(context)!.tabName[tabItem],
// Option 2:
// tried some variants of this, this will just print "AppLocalizations.of..." as a string
label: '$AppLocalizations.of($context)!.$tabName[$tabItem]',
// Option 3:
label: AppLocalizations.of(context)!.bottomNavBarLabel(tabName[tabItem])
// and added the following to my `app_en.arb` file:
"bottomNavBarLabel": "{label}",
"#bottomNavBarLabel": {
"type": "text",
"placeholders": {
"label": {}
}
},
// but that doesn't actually translate the variable passed along (which does makes sense, but I figured I'd at least try it)
I've also tried passing the BuildContext along to the TabName Map, but couldn't get it to work.
I'm sure this is something relatively simple that I just can seem to figure out. Maybe working with a Map is actually not the way to go for this, I don't know...
So how do I make it so that the label (tabName[tabItem]) is translatable?

Answer 1

In my personal experience so far, you don't change the labels through passing data between widgets (not that you can't, but IMHO this is much more easier and pragmatic, since the user can have an app in his native language, if you support it that is, without having to change the apps language inside the app settings), but with locale language that is detected through app localization/internationalization.
You might wanna try a few things. First, try adding this callback in your MaterialApp() :
UPDATE: I have tested it in my emulator and it is working, updated asnwer is below.
// here you define the languages that you want to support, so it is important to first put the language you wish your app to be in
supportedLocales: const <Locale>[
Locale('en'),
Locale('nl'),
],
localeResolutionCallback: (locale, supportedLocales) {
for (var supportedLocale in supportedLocales) {
if (supportedLocale.languageCode == locale.languageCode &&
supportedLocale.countryCode == locale.countryCode) {
return supportedLocale;
}
}
return supportedLocales.first; // because of this it will always return the first locale from the list
},
Here is where you check if the current locale is supported in your app, if it is, change the text to your locale.
If you haven't yet, in your lib folder create a new folder called l10n, and add a file app_en.arb where you can define the text you wanna change in English. Then do the same with another file, I made one for German, so app_de.arb. In those files, define the text you wish to change throughout the app with locale language change:
app_en.arb
{
"##locale": "en",
"hello": "Hello",
"#hello": {
"description": "The conventional newborn programmer greeting"
},
}
You do the same for German (or any other language for that matter) but you only define the main EN you wish to change:
{
"##locale": "de",
"hello": "Hallo", // from English to German
}
Then you define where is the text you want to change with:
AppLocalizations.of(context).hello // here you define the word you want to change on app locale change
UPDATE: You are not passing context to the AppLocalizations.of(context).hello that it why it is not working for you and also, you have made your Map<TabItem, String> tabName a const and since you are switching values of the string, it can't be a const value.
// without a const value and you must put it in a separate class
//or in the class in which you are using it so you can pass the context
Map<TabItem, String> tabName = {
TabItem.red: AppLocalizations.of(context).red,
TabItem.green: AppLocalizations.of(context).green,
TabItem.blue: AppLocalizations.of(context).blue,
};
If this doesn't work, let me know and I will try to find another solution for you. Cheers!