'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 1:^[1]

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

Solution 2:^[2]

If you want to apply direction to all pages of your app, you can use builder in MaterialApp :

void main()  {
  runApp(DirectionApp());
}

class DirectionApp extends StatelessWidget  {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.ltr,
          child: child!,
        );
      },
    );
  }
}

Solution 3:^[3]

Try this:

import 'dart:ui' as UI;

UI.TextDirection direction = UI.TextDirection.ltr;

Directionality(
            textDirection: direction,
            child: widget());

Solution 4:^[4]

I believe you can fix this by adding as <your chosen import name> to the end of eg. the statement that imports 'intl'. You would then have to prefix all your calls to methods in this library with <your chosen import name>.

Not ideal though.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Vahid Rajabi
Solution 3	ouflak
Solution 4	GrahamD

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]