Flutter：如何翻译 BottomNavigationBarItem 上的选项卡

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() :

localeResolutionCallback: (locale, supportedLocales) {
          for (var supportedLocale in supportedLocales) {
            if (supportedLocale.languageCode == locale.languageCode &&
                supportedLocale.countryCode == locale.countryCode) {
              return supportedLocale;
            }
          }

          return supportedLocales.first;
        },

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

If this doesn't work, let me know and I will try to find another solution for you. Cheers!