How to apply AppLocalizations on lists in Flutter?

Question

Please translate my list of strings by using applocalizations on flutter. I am facing problem with lists but it is working correctly for my single strings by using this line of code "AppLocalizations.of(context)!.myFav". How to handle the list of strings using applocalizations?

List<ProfileItems> items = [
  ProfileItems(iconName: AppImage.heart, title: "myFav"),
  ProfileItems(iconName: AppImage.save_collection, title: "myColec"),
  ProfileItems(iconName: AppImage.my_purchases, title: "myPurchase"),
  ProfileItems(iconName: AppImage.my_gifts, title: "myGift"),
  ProfileItems(iconName: AppImage.preferences, title: "myPref"),
];

ListView.builder(
  itemCount: items.length,
  padding: EdgeInsets.zero,
  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Column(
      children: [
        Container(
          height: 40,
          margin: EdgeInsets.symmetric(horizontal: 8),
          child: Center(
            child: ListTile(
              minLeadingWidth: 10,
              visualDensity: VisualDensity(horizontal: 0, vertical: -4),
              leading: SvgPicture.asset(
                items[index].iconName,
                fit: BoxFit.cover,
                color: themeController.theme.cardColor,
              ),
              title: AppText.appText(
                items[index].title, // AppLocalizations.of(context)!
                fontFamily: true,
                fontSize: 14,
                fontWeight: FontWeight.normal,
                textColor: themeController.theme.cardColor,
              ),
              trailing: Icon(
                Icons.navigate_next_outlined,
                color: themeController.theme.cardColor,
              ),
            ),
          ),
        ),
        const Divider(
          indent: 8,
          endIndent: 8,
          thickness: 1,
        ),
      ],
    );
  },
);

Answer 1

You can use ternary operator where you are setting up the static list view text If you have taken a variable which stores the language code ex - en for English or mr for Marathi, then your code will look like below

late String appLang = "";

You will have to store selected language variable in above string defined.

 List<ProfileItems> items = [
  ProfileItems(iconName: AppImage.heart, title: appLang == 'en' ? 'MyFav' : 'माझे आवडते'),
  ProfileItems(iconName: AppImage.save_collection, title: appLang == 'en' ? 'MyCollection' : 'माय कलेक्शन'),
];

Note: This solutions helps if your app have language support upto 2 or 3 languages.

Answer 2

strings.json file content

{
  "Hello, world!" : "こんにちは、世界！"
}

code.dart file content

import 'package:flutter_localizations/flutter_localizations.dart';

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
final loc = AppLocalizations.of(context);

List<String> strings = ["Hello, world!", "This is a localized string."];

// Get the localized strings.


List<String> localizedStrings = [];
 for (String string in strings) {
  localizedStrings.add(loc.translate(string));
}

// Display the localized strings.

return Text(localizedStrings.join("\n"));
  }
}

This code will display the following text:

こんにちは、世界！
This is a localized string.

Answer 3

Try a function that switches the title strings to translated string.

1. Declare title strings as constant objects somewhere to avoid misspelling which might lead to errors. Because it's used in multiple places.

const myFav = 'myFav';

2. Use the string object in items' titles.

ProfileItems(iconName = AppImage.heart, title = myFav)

3. Make a function that switches the titles to translated strings.

String translateTitle(BuildContext context, String title) {
  AppLocalizations appLocalizations = AppLocalizations.of(context)!;
  switch (title) {
    case myFav:
      return appLocalizations.myFav;
    // ...
    // handle rest of cases
    // ...
    default:
      return 'Default Title';
  }
}

4. Use it at the Text widget like so

translateTitle(context, items[index].title)