ShadSelect.withSearch full width

[MuhammadAshouri]

Steps to reproduce

I made a ShadSelect.withSearch widget and wanted to set minWidth to double.infinity to full size it

Expected results

If I set minWidth to any lower values than double.infinity, such as 300 it works perfectly fine

Actual results

But when its set to double.infinity, the options overflows the screen

shadcn_ui version

0.8.1

Platform

Android

Code sample

ShadSelect.withSearch(
  minWidth: 300, // double.infinity
  options: dataList
),

(I'm aware that the required params are not here!)

Flutter Doctor output

Flutter Doctor output

[✓] Flutter (Channel stable, 3.24.1, on Microsoft Windows [Version 10.0.22635.4145], locale en-US)
• Flutter version 3.24.1 on channel stable at C:\dev\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5874a72aa4 (13 days ago), 2024-08-20 16:46:00 -0500
• Engine revision c9b9d5780d
• Dart version 3.5.1
• DevTools version 2.37.2

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at D:\Android\sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: D:\Android\Android studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.10+0--11609105)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Enterprise 2022 17.11.2)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise
• Visual Studio Enterprise 2022 version 17.11.35222.181
• Windows 10 SDK version 10.0.22621.0

[✓] Android Studio (version 2024.1)
• Android Studio at D:\Android\Android studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.10+0--11609105)

[✓] VS Code (version 1.92.2)
• VS Code at C:\Users...\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.96.0

[✓] Connected device (4 available)
• sdk gphone16k x86 64 (mobile) • emulator-5554 • android-x64 • Android 15 (API 35) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22635.4145]
• Chrome (web) • chrome • web-javascript • Google Chrome 128.0.6613.86
• Edge (web) • edge • web-javascript • Microsoft Edge 128.0.2739.42

[✓] Network resources
• All expected network resources are available.

• No issues found!

[nank1ro]

double.infinity doesn't work because it's an overlay.
An overlay can go beyond the screen.
Try to achieve the result with MediaQuery.sizeOf(context).width and removing some padding

[moshOntong-IT]

double.infinity doesn't work because it's an overlay. An overlay can go beyond the screen. Try to achieve the result with MediaQuery.sizeOf(context).width and removing some padding

I think layout builder can be help. To make responsive the popover, in my POV

[MuhammadAshouri]

double.infinity doesn't work because it's an overlay. An overlay can go beyond the screen. Try to achieve the result with MediaQuery.sizeOf(context).width and removing some padding

Sorry I'm a newbie in flutter... :)
Actually I did that but still not working, I set all paddings to zero and used MediaQuery width
Can you help me with fields that should be filled to do that?

[moshOntong-IT]

double.infinity doesn't work because it's an overlay. An overlay can go beyond the screen. Try to achieve the result with MediaQuery.sizeOf(context).width and removing some padding

Sorry I'm a newbie in flutter... :)

Actually I did that but still not working, I set all paddings to zero and used MediaQuery width

Can you help me with fields that should be filled to do that?

how about wrap your shad select with LayoutBuilder? layout builder will give you the constraints of that current widget. AFAIK. The media query width will give you the size of your screen

[MuhammadAshouri]

how about wrap your shad select with LayoutBuilder? layout builder will give you the constraints of that current widget. AFAIK. The media query width will give you the size of your screen

Oh wow, thanks a lot
Worked like a charm

[nank1ro]

@MuhammadAshouri is the issue resolved?

[jonsaw]

how about wrap your shad select with LayoutBuilder? layout builder will give you the constraints of that current widget. AFAIK. The media query width will give you the size of your screen

Oh wow, thanks a lot Worked like a charm

The issue with LayoutBuilder is it messes with the tab order for focuses.

Screen.Recording.2024-11-18.at.12.27.45.PM.mov

[nank1ro]

@jonsaw have you tried with

FocusTraversalGroup(
    policy: OrderedTraversalPolicy(),
    child: ..
)

? or WidgetOrderTraversalPolicy

[jonsaw]

@jonsaw have you tried with

FocusTraversalGroup(
    policy: OrderedTraversalPolicy(),
    child: ..
)

? or WidgetOrderTraversalPolicy

Yes this works @nank1ro. Thanks for the suggestion!