DraggableSheet moves up when keyboard opens

[faizanje]

I am experiencing an issue with the DraggableSheet. Whenever the keyboard opens, the DraggableSheet always moves up, regardless of the current state or configuration. This behavior is undesirable and disrupts the user experience.

Steps to reproduce:

1. Add the above code in your Flutter project.
2. Run the project.
3. Tap on the TextField to open the keyboard.
4. Observe that the DraggableSheet moves up.

`import 'package:flutter/material.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

Expected behavior:
The DraggableSheet should stay in its current position when the keyboard opens.

Actual behavior:
The DraggableSheet moves up when the keyboard opens.

import 'package:flutter/material.dart';  
import 'package:smooth_sheets/smooth_sheets.dart';  
  
void main() {  
  runApp(const MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  const MyApp({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return const MaterialApp(  
      home: Scaffold(  
        resizeToAvoidBottomInset: false,  
  body: SmoothSheetDemo(),  
  ),  
  );  
  }  
}  
  
class SmoothSheetDemo extends StatefulWidget {  
  const SmoothSheetDemo({super.key});  
  
  @override  
  _SmoothSheetDemoState createState() => _SmoothSheetDemoState();  
}  
  
class _SmoothSheetDemoState extends State<SmoothSheetDemo> {  
  final SheetController _smoothSheetController = SheetController();  
  
  @override  
  Widget build(BuildContext context) {  
    final List<double> snaps = [0.3, 0.5, 1.0];  
  const minExtent = Extent.proportional(0.3);  
  final extentSnaps = snaps.map((e) => Extent.proportional(e)).toList();  
  final physics = SnappingSheetPhysics(  
      snappingBehavior: SnapToNearest(  
        snapTo: extentSnaps,  
  ),  
  );  
  
  return SafeArea(  
      child: Stack(  
        children: [  
          const Placeholder(),  
  DraggableSheet(  
            minExtent: minExtent,  
  controller: _smoothSheetController,  
  initialExtent: minExtent,  
  physics: physics,  
  child: buildContent(),  
  ),  
  ],  
  ),  
  );  
  }  
  
 Widget buildContent() {  
  return Container(  
    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(),  
  ),  
  ),  
  ),  
  ),  
  ],  
  ),  
  );  
} 
}

Screen_recording_20240628_043148.webm

[fujidaiti]

Hi @faizanje,

Whenever the keyboard opens, the DraggableSheet always moves up,

This is the intended behavior of the sheet. If you want to keep the current sheet position even when the keyboard opens, wrap your content in a SheetContentScaffold:

          DraggableSheet(
            minExtent: minExtent,
            controller: _smoothSheetController,
            initialExtent: minExtent,
            physics: physics,
            child: SheetContentScaffold(
              body: buildContent(),
            ),
          ),

Moreover, nesting a sheet in a Scaffold should be avoided especially when the sheet has textboxes. See this comment for more details.

[faizanje]

Thank you for your quick response. Wrapping my content in a SheetContentScaffold has resolved the issue.

[faizanje]

Thank you for your response and the suggestion to use SheetContentScaffold. However, the issue still persists, the sheet still partially moves up when the keyboard opens. I also noted your comment about avoiding nesting a sheet within a Scaffold, so I removed the scaffold from the root.

Here is the updated code I used:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SmoothSheetDemo(),
    );
  }
}

class SmoothSheetDemo extends StatefulWidget {
  const SmoothSheetDemo({super.key});

  @override
  _SmoothSheetDemoState createState() => _SmoothSheetDemoState();
}

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

  @override
  Widget build(BuildContext context) {
    final List<double> snaps = [0.3, 0.5, 1.0];
    const minExtent = Extent.proportional(0.3);
    final extentSnaps = snaps.map((e) => Extent.proportional(e)).toList();
    final physics = SnappingSheetPhysics(
      snappingBehavior: SnapToNearest(
        snapTo: extentSnaps,
      ),
    );

    return SafeArea(
      child: Stack(
        children: [
          const Scaffold(
            body: Column(
              children: [
                TextField(),
                Expanded(
                  child: Placeholder(),
                )
              ],
            ),
            resizeToAvoidBottomInset: false,
          ),
          DraggableSheet(
            minExtent: minExtent,
            controller: _smoothSheetController,
            initialExtent: minExtent,
            physics: physics,
            child: SheetContentScaffold(
              body: buildContent(),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildContent() {
    return Container(
      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(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

[faizanje]

Screen_recording_20240628_221948.webm

[faizanje]

@fujidaiti Any update on this?

[fujidaiti]

I'll close this as a duplicate of #14. Opening the keyboard on a non-fullscreen sheet is currently unstable. Please follow #14 for further updates.

[fujidaiti]

I noticed that a fix for #14 didn't solve the issue mentioned in this comment. I have created a new issue to track this bug instead of reopening this issue (#192), so please follow up on that.

[dickermoshe]

Quick & Dirty workaround:

Stack(children: [
  Scaffold(...)
  MediaQuery.removeViewInsets(
    removeBottom: true,
    context: context,
    child: ScrollableSheet(...)))