[BUG] Can't open on screen keyboard when showFlexibleBottomSheet based on content height is used

[Ruslanbek0809]

Thanks for the package. I can't open the on-screen keyboard when showFlexibleBottomSheet based on content height is used. Can you check and let me know if you get this issue as well?

[mark-kascheev]

@Ruslanbek0809 Hello! What do you mean? Can you attach video for example?

[jcmtyler]

Hello, not sure if this is the same thing, but I also came here to report an issue with the on-screen keyboard when using showFlexibleBottomSheet 3.1.2 and Flutter 3.7.7. Attached is a short video showing how I open the bottom sheet, but then when the keyboard appears it completely blocks the sheet so I can't see what I'm typing. Here's my usage:

showFlexibleBottomSheet<void>(
      minHeight: 0,
      initHeight: 1.0,
      maxHeight: 1.0,
      isCollapsible: true,
      isExpand: false,
      context: ctx,
      builder: (BuildContext context, ScrollController scrollController, double bottomSheetOffset) {
        return ListView(
          controller: scrollController,
          shrinkWrap: true,
          padding: EdgeInsets.all(10.0),
          children: [
            Text(
              selectedDay.longDateOnly(),
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            ...events(appState, selectedDay),
            const SizedBox(height: 8.0),
            notes(context, appState, selectedDay),
          ],
        );
      },
      isSafeArea: true,
    );

[internetova]

@jcmtyler
Hi! If you are using BottomSheet hight of which is overlapped by the keyboard, it’s better to use custom BottomSheet from the framework.

Sample is below:

class TestBottomSheet extends StatelessWidget {
  const TestBottomSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () => showModalBottomSheet(
                context: context,
                builder: (_) => const _BottomSheet(),
                backgroundColor: Colors.amber,
              ),
              child: const Text('Open'),
            ),
          ],
        ),
      ),
    );
  }
}

class _BottomSheet extends StatelessWidget {
  const _BottomSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: AnimatedPadding(
        padding: MediaQuery.of(context).viewInsets,
        duration: const Duration(milliseconds: 100),
        child: Container(
          height: 200,
          color: Colors.amber,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                Text('BottomSheet'),
                Padding(
                  padding: EdgeInsets.all(20.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(
                      Radius.circular(12.0),
                    ),
                    child: ColoredBox(
                      color: Colors.white,
                      child: TextField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                              Radius.circular(12.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}