ShowShadSheet Overlap keyboard

hifiaz commented 1 month ago

Steps to reproduce

can use default showShadSheet from sample and set side: ShadSheetSide.bottom and inside ShadSheet put ShadForm

Expected results

keyboard not overflow ShadInputFormField

Actual results

keyboard overflow input form

Platform

Android

Code sample

```dart showShadSheet( side: ShadSheetSide.bottom, context: context, builder: (context) => const ExpensesSheet(side: ShadSheetSide.bottom), ); class ExpensesSheet extends StatefulWidget { const ExpensesSheet({super.key, required this.side}); final ShadSheetSide side; @override State createState() => _ExpensesSheetState(); } class _ExpensesSheetState extends State { final formKey = GlobalKey(); final TextEditingController _expenses = TextEditingController(); final TextEditingController _note = TextEditingController(); @override Widget build(BuildContext context) { return ShadSheet( constraints: BoxConstraints.tightFor(width: MediaQuery.sizeOf(context).width), title: const Text('Pengeluaran'), description: const Text("Uang yang anda keluarkan"), content: ShadForm( key: formKey, child: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 350), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ ShadInputFormField( id: 'pengeluaran', controller: _expenses, label: const Text('Pengeluaran'), placeholder: const Text('cth: 500000'), keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], validator: (v) { if (v.length < 2) { return 'Masukkan angka yang benar'; } return null; }, ), const SizedBox(height: 16), ShadInputFormField( id: 'note', controller: _note, label: const Text('Catatan'), maxLines: 3, ), ], ), ), ), actions: [ ShadButton( onPressed: () async { }, text: const Text('Simpan')), ], ); } } ```

Screenshots or Video

Screenshots / Video demonstration

https://github.com/nank1ro/flutter-shadcn-ui/assets/20653803/7928002c-67df-42ca-a99d-3e0cedabe594

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```console [✓] Flutter (Channel beta, 3.22.0-0.3.pre, on macOS 14.4.1 23E224 darwin-arm64, locale en-ID) • Flutter version 3.22.0-0.3.pre on channel beta at /Users/fiaz/Documents/dev/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 87b652410d (4 weeks ago), 2024-04-23 21:41:18 -0500 • Engine revision b4bfd45986 • Dart version 3.4.0 (build 3.4.0-282.3.beta) • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/fiaz/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio.app/Contents • 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.6+0-17.0.6b829.9-10027231) [✓] VS Code (version 1.89.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.88.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.4.1 23E224 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.208 ! Error: Browsing on the local area network for iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. • No issues found! exit code 0 ```

nank1ro commented 1 month ago

Just wrap ShadSheet in a scrollview:

SingleChildScrollView(
      padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
      child: ShadSheet(
         ...
      ),
),

hifiaz commented 1 month ago

@nank1ro have try it wrap it but not work

https://github.com/nank1ro/flutter-shadcn-ui/assets/20653803/da1aa8df-56e4-483e-bca8-5e8e1f6c015e

nank1ro commented 1 month ago

Use the v0.5.1 with this code:

class ExpensesSheet extends StatefulWidget {
  const ExpensesSheet({super.key, required this.side});

  final ShadSheetSide side;

  @override
  State<ExpensesSheet> createState() => _ExpensesSheetState();
}

class _ExpensesSheetState extends State<ExpensesSheet> {
  final formKey = GlobalKey<ShadFormState>();
  final TextEditingController _expenses = TextEditingController();
  final TextEditingController _note = TextEditingController();

  @override
  void dispose() {
    _expenses.dispose();
    _note.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ShadSheet(
      title: const Text('Pengeluaran'),
      description: const Text("Uang yang anda keluarkan"),
      content: ShadForm(
        key: formKey,
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 350),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              ShadInputFormField(
                id: 'pengeluaran',
                controller: _expenses,
                label: const Text('Pengeluaran'),
                placeholder: const Text('cth: 500000'),
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                validator: (v) {
                  if (v.length < 2) {
                    return 'Masukkan angka yang benar';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              ShadInputFormField(
                id: 'note',
                controller: _note,
                label: const Text('Catatan'),
                maxLines: 3,
              ),
            ],
          ),
        ),
      ),
      actions: [
        ShadButton(onPressed: () async {}, text: const Text('Simpan')),
      ],
    );
  }
}

nank1ro commented 1 month ago

Closing as solved, comment again if something isn't working.

nank1ro / flutter-shadcn-ui