How to use Align or Positioned in Stack , Taking into account the direction of the language

Question

In my case, I have a Stack containing Icon and Card

I want the icon to appear in the right corner in case LTR and in the left corner in case RTL

I have the following code:

Stack(
      children: <Widget>[
        Card(
          color: Colors.white,
          elevation: 4,
          margin: EdgeInsets.only(top: 8, right: 8, left: 8),
          child: Container(
            height: 100,
            width: double.infinity,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('text 1'),
                  Text('text 2'),
                  Text('text 3'),
                ],
              ),
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: 10,
          child: Icon(
            Icons.ac_unit,
            size: 50,
          ),
        )
      ],
    );

The result in RTL mode is :

The result in LTR mode is :

How can I fix this

If you want it on the right, then instead of left in the positioned put right:10 — Sudhanshu Bhagwat, Jul 01 '20 at 08:48
I want it when the language changes, its place changes automatically, like the three texts — farouk osama, Jul 01 '20 at 08:52
Add a conditional for displaying the Positioned Widget. Like if(RTL) Positioned(right:10) If you get what I mean — Sudhanshu Bhagwat, Jul 01 '20 at 08:56
This answer seems to address your question https://stackoverflow.com/a/50535186/442553 — Andrey Ozornin, Jul 01 '20 at 08:58
If I used a Row Widget, the icon would change position automatically like the three Texts, but here the situation is a little different — farouk osama, Jul 01 '20 at 09:20

M Alkhatib · Accepted Answer · 2020-07-01T09:32:28.547

12

try this

  Positioned.directional(textDirection:Directionality.of(context) ,
    top: 10,
    end:  10,
    child: Icon(
      Icons.ac_unit,
      size: 50,
    ),
  )

edited Jul 01 '20 at 09:32

answered Jul 01 '20 at 09:27

M Alkhatib

627
4
12

3

Thanks for `Directionality.of(context)` – Pratik Butani Nov 24 '21 at 12:29

Yadu · Answer 2 · 2020-07-01T09:31:43.767

-1

UPDATE

Put the icon inside a Container with maxWidth and set the alignment like below

alignment: isRTL? Alignment.centerLeft: Alignment.centerRight;

set the alignment property of Stack like this.

when the Language is changed to RTL just call

setState((){
 isRTL = true;
})

in a stateful widget.

vice versa if you want to change it to LTR

edited Jul 01 '20 at 09:31

answered Jul 01 '20 at 09:01

Yadu

2,979
2
12
27

It is a solution, but not the best – farouk osama Jul 01 '20 at 09:18
best answer needs a best question, try to update your question regarding what exactly you want, steps to be involved. – Yadu Jul 01 '20 at 09:21
I apologize, I think the question is clear. Take a look at the question's comments – farouk osama Jul 01 '20 at 09:24
have you looked into Directionality widget? – Yadu Jul 01 '20 at 09:32

How to use Align or Positioned in Stack , Taking into account the direction of the language

2 Answers2