Flutter: how to translate tabs on 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?