Forem: Curtly Critchlow

A Step-by-Step Guide to Internationalizing Flutter App

Curtly Critchlow — Sat, 07 Sep 2024 00:11:22 +0000

Introduction

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:

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
```

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

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

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.

Create the arb folder and the app_en.arb file:

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

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

{
"materialAppTitle": "localizations Sample App'
}

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:

In main.dart , import app_localizations.dart :

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

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)),
        );
      }),
    );

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".
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.

How to Fix 'AssetManifest' is imported from both 'package:flutter...' and 'package:google_fonts...' error

Curtly Critchlow — Thu, 11 May 2023 13:38:50 +0000

Indroduction

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 or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to fix An error occured when accessing the keychain when authenticating with firebase_auth

Curtly Critchlow — Tue, 25 Apr 2023 23:20:28 +0000

Introduction

In this article we'll discuss the fix for An error occured when accessing the keychain. The NSLocalizedFailureReasonErrorKey field in the NSError.userInfo dictionary will contain more information about the above error

You might see this error when trying to sign in to your flutter app using firebase_auth

Solution

Open your macOs folder in Xcode
In runner, under targets select + capability tab
select keychain sharing complete the instructions given in Xcode
restart your project and you will be prompted to enter your keychain password

That's it, You should now be able to authenticate with firebase_auth in your flutter app.

Connect with me

Thank you for reading my post. Feel free to subscribe below or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to fix network error (such as timeout, interrupted connection or unreachable host) has occured.

Curtly Critchlow — Tue, 25 Apr 2023 22:53:02 +0000

Introduction

In this article we will show how to fix the network error (such as timeout, interrupted connection or unreachable host) has occured

Solution

In Xcode, check Incoming connections and outgoing connections in debug, release and profile mode as shown below.

Connect with me

Thank you for reading my post. Feel free to subscribe below or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to fix core/duplicate-app] A Firebase App named "[DEFAULT]" already exists error

Curtly Critchlow — Mon, 24 Apr 2023 20:38:48 +0000

Introduction

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

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.
Install and Run the flutterFire CLI in the root of your flutter project directory.

If flutterFire CLI 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 subscribe below or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to fix java.security.NoSuchAlgorithmException: Algorithm HmacPBESHA256 not available when building app bundle

Curtly Critchlow — Wed, 05 Apr 2023 13:44:09 +0000

Indroduction

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 because the java version the app is built with is different for 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 you 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 like, comment, subscribe or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to fix Missing file libarclite_iphonesos.a(Xcode 14.3)

Curtly Critchlow — Mon, 03 Apr 2023 21:53:01 +0000

Introduction

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

Solution

Open Xcode
Select pods
Select a package in targets
Change Minimum Deployments to 13.0
Repeat steps 3 to 4 until you change the minimum deployments for all you packages.

Your project should now run in your editor of choice.

Connect with me

Thank you for reading my post. Feel free to subscribe below or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

How to Fix Failed Archive on Xcode 14.3 (rsync error: some files could not be transferred (code 23))

Curtly Critchlow — Mon, 03 Apr 2023 21:20:30 +0000

Introduction

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 see 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 subscribe below or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

Using the Custom Paint widget to Create a Linear Gauge - Part 1

Curtly Critchlow — Fri, 14 Oct 2022 15:47:30 +0000

Introduction

At the end of this tutorial series you will learn how to use the custom paint widget by creating a Linear Gauge. The custom paint widget allows you to draw and paint directly to the canvas. This is useful when you can't find or combine a pre build widget to meet your needs.

At the end of this series your linear gauge will look like this.

Creating a flutter project

Before we start building a linear gauge, let's create our flutter project. In your terminal run;

$ flutter create linear_gauge

In main.dart delete everything starting from line 7 and replace it with the following.

import 'linear_gauge.dart';
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Linear Gauge',
      home: LinearGauge(maxValue: 100, minValue: 0, actualValue: 75),
    );
  }
}

Now we have to create the LinearGauge() widget.

How a linear gauge works

From the image in the introduction we can deduce that the gauge need to be provided with a maximum value, a minimum value and an actual value. The gauge then displays the actual value in proportion to the maximum and minimum value.

Let's create our stateful widget to represent this;

$ touch lib/linear_gauge.dart

import 'package:flutter/material.dart';
import 'linear_gauge_custom_painter.dart';

class LinearGauge extends StatefulWidget {
  LinearGauge({
    required this.maxValue,
    required this.minValue,
    required this.actualValue,
    Key? key,
  }) : super(key: key);

  final double maxValue;
  final double minValue;
  final double actualValue;

  @override
  State<LinearGauge> createState() => _LinearGaugeState();
}

class _LinearGaugeState extends State<LinearGauge> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Linear Gauge')),
      body: CustomPaint(
        size: MediaQuery.of(context).size,
        painter: LinearGaugeCustomPainter(),
      ),
    );
  }
}

You will notice our body property accepts a CustomPaint that takes in a LinearGaugeCustomPainter. This class will be used to draw and paint our linear gauge into existence.

We used MediaQuery.of(context).size to ensure our gauge scales to the device size.

Components of a linear gauge

Before we start painting it is important to breakdown our linear gauge into its components. From the image above we notice that the gauge comprises of;

A main axis - this is the vertical part of the gauge.
Major ticks - This is the long horizontal lines
Minor ticks - This is the short horizontal lines.
Scale - The numbers that the ticks represents.
Pointer - The vertical line that colors the main axis from the minimum value to the actual value.
The actual value indicator - The icon that shows where the actual value is.
The actual Value - The TextPainter that displays the actual value.

$ touch lib/linear_gauge_custom_painter.dart

import 'package:flutter/material.dart';

class LinearGaugeCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

Our LinearGaugeCustomPainter extends CustomPainter which gives us access to the paint and shouldRepaint methods.

We will use our paint method to create the components mentioned above.

Drawing the main axis

Before we draw the main axis we first have to determine where it will begin and end. the size parameter contains the height and width of the canvas. We must draw within the limits of the width and height parameters or our drawing won't be visible on the screen.

Let's define the start point and end point of our main axis.

class LinearGaugeCustomPainter extends CustomPainter {
  ///find Main Axis start point
  Offset getMainAxisStartPoint(Size size) => Offset(size.width / 2, size.height / 7);

  ///find Main Axis endpoint
  Offset getMainAxisEndPoint(Size size) => Offset(size.width / 2, size.height / 1.2);
...
}

To draw the main axis we need to draw a line from a start point of our choosing to an endpoint of our choosing. We determine these point using the Offset class. This class accepts a x-axis value and a y-axis value.

To place the main axis of the gauge in the middle of the canvas along the x-axis we divide the size.width by 2. We then set the y-axis to the lowest and highest point of the main axis by dividing the height of the canvas by a constant.

The the constants 7 and 1.2 was chosen because those are the height position at with I want the main axis to start and end. Feel free to play around with the constants to determine your prefered starting and endpoints. The size parameter is used to ensure the main axis scale in proportion to the height of the canvas on any device.

class LinearGaugeCustomPainter extends CustomPainter {
  ...
  /// Draws the main axis of the Gauge
  void drawGaugeMainAxis(Canvas canvas, Size size) {
    final gaugeMainAxisPainter = Paint()
      ..color = Colors.grey.shade300
      ..strokeWidth = 5.0;
    canvas.drawLine(getMainAxisStartPoint(size), getMainAxisEndPoint(size), gaugeMainAxisPainter);
  }
  ...
}

To draw the main axis we call the canvas.drawLine() method and pass in the start point offset value and endpoint offset value. It also expects a Paint() class that describes the style to use when drawing on the canvas.

class LinearGaugeCustomPainter extends CustomPainter {
  ...

  @override
  void paint(Canvas canvas, Size size) {
    drawGaugeMainAxis(canvas, size);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

We call our drawGaugeMainAxis() method in inside the paint method since this method is called whenever the object needs to paint.

We return true to our shouldRepaint() since we'll be adding animation to our gauge and we'll need to repaint during the animation from 0 to the actual value.

Run the code and our scale widget will look like;

Conclusions

We've created the main axis of our linear gauge and in the process learnt how to draw a line on the canvas at a start and endpoint of our choosing. In the next article in this series we'll learn how to position our major ticks along the main axis.

Benefits of building a cli app in dart.

Curtly Critchlow — Wed, 28 Sep 2022 19:15:38 +0000

Introduction

This is the first article in the series "Building a command line interface app in dart". In this series, we will learn together how to build a cli in dart and publish it on pub.dev.

Why build a cli?

There are many reasons to build your cli app, my main reason is to automate repetitive tasks

Personally, I hate, yes hate is a strong word, I hate doing the same thing twice. I hate repetitive tasks so much that I often procrastinate when I'm starting a new flutter project. I delay because every project will need the same things like adding themes, connecting the app to firebase, creating your folder structure, etc.

To solve my procrastination problem once and for all, I've decided to build my opinionated cli. If I'm going to build a cli I might as well publish it to pub.dev to benefit developers who follow a similar workflow to mine.

Other reasons to build a cli are,

Use your app without having to build a UI for it.
To understand how cli app works
To get familiar with using the terminal

The million-dollar question is, how to build a cli in dart?

How to build a simple cli in dart?

Fortunately, dart.dev give us a great starting point... I recommend your read their tutorial. That tutorial while being an amazing starting point is too simple for a relatively complex cli app. I'll leave you to read the aforementioned article and we'll continue our cli journey in the next article of this series where we will create our cli.

Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

Livestock Information System - 100DaysOfCode - Days 23, 24, 25, 26

Curtly Critchlow — Tue, 27 Jul 2021 03:01:50 +0000

Introduction

This post is part of my 100DaysOfCode series. In this series, I write about what I am learning on this challenge. I will be learning flutter and firebase by building an Agriculture Management Information System. This will consist of an app for crops and livestock.

Recap

On Day 22 we discussed why using form fields as descendants of a ListView is a bad idea.

Overview

In this post, we will discuss the farm module added over the past four days.

Farm Form

The farm form screen handles both the create and update scenarios. It contains text form fields, single and multi-select dropdown form fields.

It also allows the user to get the current geolocation using the geolocator package.

Farm form data is stored on cloud firestore while the farm profile picture is stored on cloud storage.

The farm list and detail screens both use a query snapshot and a document snapshot to ensure real-time functionality.

Wrap Up

In this post, we discussed we discussed the farm module added over the past four days.

Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.

Why using form fields as descendants of a Listview is a bad idea - #100DaysOfCode - Day 22

Curtly Critchlow — Fri, 23 Jul 2021 00:30:42 +0000

Introduction

This post is part of my 100DaysOfCode series. In this series, I write about what I am learning on the 100DaysOfCode challenge. For this challenge, I will be learning flutter and firebase by building an Agriculture Management Information System.

Recap

On Day 21 we mainly discussed the difficulty I had with writing widget tests for my Flutter app.

Overview

In this post, we will discuss why using form fields as descendants of a Listview is a bad idea.

ListView Gotcha

ListView is a scrolling widget that displays its children one by one. When a child is scrolled out of view, the associated element subtree, states and render objects are destroyed. The means that user input from widgets like TextFormField will be lost when the widget is scrolled out of view. While they are ways to keep state mentioned here, I prefer to use a SingleChildScrollView with a row or column as its child to accommodate multiple widgets as shown below.

SingleChildScrollView(child:Column(children:yourFormChildren)); solution from stackoverflow

Wrap Up

In this post, we discussed why using form fields as descendants of a ListView is a bad idea.

Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.