[Request] Pinned items inside when they out of their parent constraints (X axis)

[burekas7]

Hi,

Can you add an automatic behavior when the DropDownItems are outside the range on X axis to align it inside (As you do when it outside for y axis), without need to set the offset option.

return Scaffold(
      appBar: AppBar(
        title: Text("Title"),
      ),
      body: SafeArea(
          child: Stack(
        children: [
          Positioned(
            bottom: 70,
            left: 30,
            child: DropdownButton2(
              underline: Container(),
              dropdownDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(14),
                color: Colors.redAccent,
              ),
              dropdownWidth: 150,
              customButton: Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(14),
                  border: Border.all(
                    color: Colors.black26,
                  ),
                  color: Colors.redAccent,
                ),
                child: const Icon(
                  Icons.sort,
                  color:
                      Colors.black, //Theme.of(context).primaryIconTheme.color,
                ),
              ),
              items: const [
                DropdownMenuItem(value: 1, child: Text("Item 1")),
                DropdownMenuItem(value: 2, child: Text("Item 2")),
                DropdownMenuItem(value: 3, child: Text("Item 3")),
              ],
              onChanged: (value) {},
            ),
          )
        ],
      )
    );

[AhmedLSayed9]

This behavior is already there.
Dropdown menu doesn't render outside the range of the screen even if you specified Offset that should render it outside.
Your sample code doesn't render outside for me as your screenshot. Can you try it again?

[burekas7]

Strange.
I tested it on Android (Real device + Emulator), on both it acts the same behavior as the image I posted above.
On x axis it go out of the screen when the drop items are out of screen bounds. Not like it acts on y axis.

(Also tested on 1.8.3)

[AhmedLSayed9]

Screen.Recording.2022-10-08.at.11.16.20.PM.mov

Also, I've tested it on iOS. You might test a different code than the above sample.

[burekas7]

I understand why.
I forgot to mention that my locale set as RTL ( Locale('he', 'IL') ),
This is why the direction is the opposite on my image and my testing.

[AhmedLSayed9]

Alright! Provide another sample that can produce the issue.

[burekas7]

The code is the same but you need to set locale for MaterialApp, but it requires some additional files for that etc.. so it's not just a sample.

It seems that for LTR it does work when the button is positioned on the right side of the screen.
Do you support both options of LTR and RTL localization?

[AhmedLSayed9]

Finally, I was able to produce the issue.
The package is supporting directionality so I'll work to fix this. Thanks!

[burekas7]

Thanks, it is fixed and working with version 1.8.4