Search code examples
flutterdartlocalizationflutter-layoutarabic

Flutter: force LTR direction for widget in a RTL app based on intl

I'm working with a boilerplate flutter app template with built-in redux support, and Hebrew RTL orientation using flutter_localizations and intl packages.

The whole app, and every new widget I create has a native RTL directionality, properly.

I have a text input field to get the user phone number. I would like this input field, with all of it's style and inside functionality to behave in a LTR manner. this is also true for other input fields I might have, like email (which is always in English)..

It seems that there is a conflict between the overall Directionality, determined by the app intl configuration, and a new Directionality widget I'm trying to "force" on my text fields to specifically swap their behavior:

                child: SizedBox(
                  width: 250,
                  child: Directionality(
                    textDirection: TextDirection.LTR,
                    child: TextField(
                      controller: phoneController,
                      keyboardType: TextInputType.phone,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                    ),
                  ),
                ),

Running this code results in the following error:

lib/modules/login/login_page.dart:54:54: Error: The argument type 'TextDirection/*1*/' can't be assigned to the parameter type 'TextDirection/*2*/'.
 - 'TextDirection/*1*/' is from 'package:intl/src/intl/text_direction.dart' ('../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/intl-0.17.0-nullsafety.2/lib/src/intl/text_direction.dart').
 - 'TextDirection/*2*/' is from 'dart:ui'.
                        textDirection: TextDirection.LTR,
                                                     ^

What am I missing here? how can I accomplish the desired behavior?

Solution

  • The problem was me. I was counting on the IDE auto-complete for imports, and it turns out both the intl package, and the regular flutter:material package expose Directionality options:

    • using the intl option for textDirection tries to override the overall config, which fails:
    child: Directionality(
  textDirection: TextDirection.LTR,
    • However, using the package:flutter/material.dart option works as expected:
    child: Directionality(
   textDirection: TextDirection.ltr,   // notice lower case