Welcome to this comprehensive tutorial where we will delve into the key steps required to internationalize your Flutter app. We'll focus on the essentials and provide you with a clear understanding of the process. For more detailed explanations and advanced use cases, you can refer to our recommended resource on Internationalizing Flutter apps.

Configuration settings

To get started, follow these steps:

1. Create your Flutter project and execute the following code to download the required packages:

    flutter pub add flutter_localizations --sdk=flutter
    flutter pub add intl:any
   

2. In your pubspec.yaml file, add the following code under the Flutter section:

    # The following section 
    is specific to Flutter.
    flutter:
      generate: true # Add this line
   

3. Create a l10n.yaml file in the root folder of your project:

    touch l10n.yaml
   

4. Open the l10n.yaml file and add the following content:

    arb-dir: lib/l10n
    template-arb-file: app_en.arb
    output-localization-file: app_localizations.dart
   

   • Specify the arb-dir parameter with the folder path where your .arb file will be stored.

   • Set the template-arb-file parameter with the name of your .arb file. The naming convention is app_<language_code>.arb , where <language_code> represents the language code (e.g., "en" for English, "es" for Spanish). You can create multiple .arb files for different languages you intend to support.

5. Create the arb folder and the app_en.arb file:

    mkdir lib/l10n
    touch lib/l10n/app_en.arb
   

6. Open lib/l10n/app_en.arb and add the following content:

    {
    "materialAppTitle": "localizations Sample App'
    }
   

7. Run the following command to generate the necessary configuration file:

    flutter gen-l10n
   

Adding localization to your app

To integrate localization into you app, follow these steps:

1. In main.dart , import app_localizations.dart :

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
   

2. Within the MaterialApp widget, add AppLocalizations.localization as the localizationsDelegates parameter and AppLocalizations.supportedLocales as the supportedLocales parameter:

    MaterialApp(
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          home: Builder(builder: (context) {
            return Scaffold(
              body: Center(child:    Text(AppLocalizations.of(context)!.materialAppTitle)),
            );
          }),
        );
   

3. Whenever you update the app_en.arb file, run flutter gen-l10n to update it. Alternatively, if you're using Visual Studio Code, right-click on the app_en.arb file and select "Generate Localizations".
4. Run your Flutter app and it should now support localization.

Conclusion

Congratulations!, You have successfully added localization to your Flutter app. Make sure to bookmark this tutorial for future reference in your upcoming Flutter projects. By implementing localization, you can reach a wider audience and provide a more personalized experience for your users.

In this article I'll share with you how to fix'AssetManifest' is imported from both 'package:flutter/src/services/asset_manifest.dart' and 'package:google_fonts/src/asset_manifest.dart'.

When you run your flutter app you might notice this error in your debug console.

Launching lib/main.dart on SM A225M in debug mode...
main.dart:1
Warning: Errors limit exceeded. To receive all errors set com.sun.xml.bind logger to FINEST level.
Warning: unexpected element (uri:"", local:"extension-level"). Expected elements are <{}codename>,<{}layoutlib>,<{}api-level>
: Error: 'AssetManifest' is imported from both 'package:flutter/src/services/asset_manifest.dart' and 'package:google_fonts/src/asset_manifest.dart'.
google_fonts_base.dart:14
import 'asset_manifest.dart';
^^^^^^^^^^^^^

Solution

Fortunately, this is a simple fix, update your google_fonts: package in pubspec.yaml to the latest version

Run your Flutter app and your code should be fine.

Connect with me

Thank you for reading my post. Feel free to like, comment, subscribe

Have you updated Xcode to 14.3 and now you see the error missing file libarclite_iphonesos.a? If yes, you are reading the correct article. I'll share with you how I fixed the error.

Solution

1. Open Xcode

2. Select pods

3. Select a package in the targets

4. Change Minimum Deployments to 13.0

5. Repeat steps 3 to 4 until you change the minimum deployments for all your packages.

Your project should now run in your editor of choice.

Connect with me

Thank you for reading my post. Feel free to connect with me

Have you updated Xcode to 14.3 and now your archive fails? If yes, you are reading the correct article. I'll share with you how I fixed failed Archive on Xcode 14.3.

The solution

When the archive failed you might have seen the rsync error below.

...
rsync error: some files could not be transferred (code 23) at /AppleInternal/Library/BuildRoots/97f6331a-ba75-11ed-a4bc-863efbbaf80d/Library/Caches/com.apple.xbs/Sources/rsync/rsync/main.c(996) [sender=2.6.9]
Command PhaseScriptExecution failed with a nonzero exit code

Fortunately, the fix is very simple, Open the file Pods/Targets Support Files/Pods-Runner/Pods-Runner-framework

Replace:

  if [ -L "${source}" ]; then
    echo "Symlinked..."
    source="$(readlink "${source}")"
  fi

with:

  if [ -L "${source}" ]; then
    echo "Symlinked..."
    source="$(readlink -f "${source}")"
  fi

The -f was added.

Your archive will now complete successfully.

Connect with me

Thank you for reading my post. Feel free to connect with me

In this article, I'll share with you how I fixed a failed flutter build app bundle command.

When I ran flutter build app bundle in my terminal I got the below error.

Execution failed for task ':app:signReleaseBundle'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.FinalizeBundleTask$BundleToolRunnable
   > Failed to read key upload from store "/Users/<your folder name>/upload-keystore.jks": Integrity check failed: java.security.NoSuchAlgorithmException: Algorithm HmacPBESHA256 not available

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 8s

Solution

The likely cause of this error is that the Java version the app is built with is different from the Java version being used to generate the signing key.

To fix run

Run flutter doctor -v

...
[✓] Android toolchain - develop for Android devices (Android SDK version
    34.0.0-rc2)
    • Android SDK at /Users/<your folder path>/Library/Android/sdk
    • Platform android-33, build-tools 34.0.0-rc2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

...

Prefix the keygen command to point to the Java version used to build your app and run your keygen command as shown below.

/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home/bin/keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Run flutter build appbundle and your build will be successful

Connect with me

Thank you for reading my post. Feel free to connect with me.

In this article, we will cover the fix for [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists exception.

If you tried running your Flutter app that's using a Firebase product you might see this error if your GoogleService-Info.plist or google-services.json files are outdated.

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists

Solution

To fix the core/duplicate-app] A Firebase App named "[DEFAULT]" already exists exception follow these two simple steps

1. Delete your google-services.json located at android/app/google-services.json if running on Android or delete your GoogleService-Info.plist located at macos/Runner/GoogleService-Info.plist if running on MacOS or ios/Runner/GoogleService-Info.plist if running on IOS.

2. Install and Run the flutterFire CLI in the root of your flutter project directory.

If flutterFire CLI is not already installed run

$ dart pub global activate flutterfire_cli

Next Run

$ flutterfire configure --project=<yourprojectID>

Follow the instructions in your terminal.

Your Flutter project should now run successfully.

Connect with me

Thank you for reading my post. Feel free to connect with me.

In this post, we will discuss how to create a dynamic dropdown form field in Flutter. We will be using two DropdownFormField() widget. A region dropdown field and a district dropdown field.

A region is the USA equivalent of a state and a district is a sub-location within a region. These two fields along with other fields comprise our Farmer Register Form as shown in the screenshot below

My goal is to filter the options in the district depending on the region selected by the user. The purpose of this methodology is to reduce the number of options in the district dropdown field.

Region Dropdown Form Field

class RegionDropdownFormField extends StatelessWidget {
  const RegionDropdownFormField({
    Key? key,
    required this.state,
  }) : super(key: key);

  final _AddFarmerScreenController state;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 5,
      child: DropdownButtonFormField(
        focusNode: state.regionFocusNode,
        decoration: FormStyles.textFieldDecoration(labelText: 'Region'),
        onChanged: (String? value) {
          state.setState(() {
            state.dropdownMenuItems = state._districtItem(value!);
            state.value = state.dropdownMenuItems!.first.value;
          });
        },
        validator: state.farmer.validateRequiredField,
        onSaved: state.farmer.saveFarmerCategory,
        items: Region.all
            .map((e) => DropdownMenuItem(
                  child: Text(e),
                  value: e,
                ))
            .toList(),
      ),
    );
  }
}

When the user selects an option from the RegionDropdownFormField() the onChanged: function will be triggered.

(String? value) {
          state.setState(() {
            state.districtDropdownMenuItems = state._getDistrictItems(value!);
            state.districtValue = state.districtDropdownMenuItems!.first.value;
          });
        }

This function calls setState() since we want the UI to update. Within setstate(), state.districtDropdownMenuItems = state._getDistrictItems(value!); creates a list of dropdownMenuItem() based on the value selected by the user. state.districtDropdownMenuItems will be assigned to the items: property of the DistrictDropdownFormField().

state.districtValue = state.districtDropdownMenuItems!.first.value; selects the first value of the newly created state.districtDropdownMenuItems. This variable will be assigned to the value: property of the DistrictDropdownFormField(). Failure to do this will create the below error.

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building Builder(dirty, dependencies: [_FocusMarker]):
There should be exactly one item with [DropdownButton]'s value: District 6. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 850 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

District Dropdown FormField

class DistrictDropdownFormField extends StatelessWidget {
  const DistrictDropdownFormField({
    Key? key,
    required this.state,
  }) : super(key: key);

  final _AddFarmerScreenController state;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 5,
      child: DropdownButtonFormField(
        focusNode: state.districtFocusNode,
        decoration: FormStyles.textFieldDecoration(labelText: 'District'),
        onChanged: (value) =>
            state._handleDropdownOnChanged(state.districtFocusNode),
        validator: state.farmer.validateRequiredField,
        onSaved: state.farmer.saveDistrict,
        value: state.districtValue,
        items: state.districtDropdownMenuItems,
      ),
    );
  }
}

This widget is a typical DropdownFormField() but note, value: state.districtValue, and items: state.districtDropdownMenuItems, are dependent on the region selected in the DistrictDropdownFormField().

Wrap Up

In this post, we discussed how to create a dynamic dropdown form field.

Connect with me

Thank you for reading my post. Feel free to follow me for more flutter tips and tricks or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.