How to Prevent DraggableSheet from Moving Up When Keyboard Opens?

[faizanje]

Hi everyone,

I'm currently facing an issue with the DraggableSheet. Whenever the keyboard opens, the sheet partially moves up, despite my efforts to keep it in its original position.

I have tried the following solutions:

Wrapping the content in a SheetContentScaffold.
Avoid nesting the sheet within a Scaffold by using a Stack instead.

import 'package:flutter/material.dart';
import 'package:smooth_sheet/smooth_sheet.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SmoothSheetDemo(),
    );
  }
}

class SmoothSheetDemo extends StatefulWidget {
  @override
  _SmoothSheetDemoState createState() => _SmoothSheetDemoState();
}

class _SmoothSheetDemoState extends State<SmoothSheetDemo> {
  final SmoothSheetController _smoothSheetController = SmoothSheetController();

  @override
  Widget build(BuildContext context) {
    final List<double> snaps = [0.0, 0.5, 1.0];
    const minExtent = Extent.proportional(0);
    final extentSnaps = snaps.map((e) => Extent.proportional(e)).toList();
    final physics = StretchingSheetPhysics(
      stretchingRange: const Extent.proportional(0),
      parent: SnappingSheetPhysics(
        snappingBehavior: SnapToNearest(
          snapTo: extentSnaps,
        ),
      ),
      spring: const SpringDescription(
        damping: 0,
        mass: 0,
        stiffness: 0,
      ),
    );

    return Stack(
        children: [
          Placeholder(),  // Replace with your desired background widget
          DraggableSheet(
            minExtent: minExtent,
            controller: _smoothSheetController,
            initialExtent: minExtent,
            physics: physics,
            child: SheetContentScaffold(
              body: buildContent(),
            ),
          ),
        ],
      );
  }

  Widget buildContent() {
    return Box(
      color: Colors.grey[900],
      child: Column(
        children: [
          const SizedBox(height: 16),
          const TextField(),
          const SizedBox(height: 16),
          Expanded(
            child: ListView(
              children: List.generate(
                100,
                (index) => Container(
                  margin: const EdgeInsets.all(4),
                  child: const FlutterLogo(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Despite these changes, the DraggableSheet still shifts its position when the keyboard opens.

Any guidance or suggestions would be greatly appreciated!

Thank you!

[fujidaiti]

I don't know if this is what you want, but you can use MediaQuery to completely remove the bottom inset value only for the sheet, which prevents it from being pushed up by the keyboard.

    final inheritedMediaQuery = MediaQuery.of(context);
    return MediaQuery(
      data: inheritedMediaQuery.copyWith(
        // Ignore the inherited viewInsets.bottom
        viewInsets: inheritedMediaQuery.viewInsets.copyWith(bottom: 0),
      ),
      child: DraggableSheet(...),
    );

[appinteractive]

My solution was to set resizeToAvoidBottomInset: false on the Page Scaffold, so the screen does not resize to avoid the keyboard.

If you still want to get elements above the keyboard, you can use MediaQuery.viewInsetsOf(context).bottom in a Positioned or Padding widget.