nank1ro / flutter-shadcn-ui

shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
https://flutter-shadcn-ui.mariuti.com
MIT License
1.16k stars 67 forks source link

ShadSelect.withSearch full width #129

Closed MuhammadAshouri closed 2 months ago

MuhammadAshouri commented 2 months ago

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 image

Actual results

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

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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? image

moshOntong-IT commented 2 months ago

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?

image

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 commented 2 months ago

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

image

nank1ro commented 2 months ago

@MuhammadAshouri is the issue resolved?