CODEWITHSUNDEEP
flutterdartlocalizationflutter-layoutarabic
Maor Barazani
Maor Barazani

Reputation: 840

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?

Upvotes: 3

Views: 5580

Answers (4)

Maor Barazani
Maor Barazani

Reputation: 840

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

Upvotes: 11

Poritosh David
Poritosh David

Reputation: 111

Try this:

import 'dart:ui' as UI;

UI.TextDirection direction = UI.TextDirection.ltr;

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

Upvotes: 7

Vahid Rajabi
Vahid Rajabi

Reputation: 359

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

Upvotes: 1

GrahamD
GrahamD

Reputation: 3165

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.

Upvotes: 0

Related Questions