showModalBottomSheet does not move along with keyboard in flutter

Question

I am newer in flutter. I searched this issue in the internet. but, showModalbottomsheet does not move along with keyboard.

I add isScrollControlled : true in showModalbottomsheet, and padding: MediaQuery.of(context).viewInsets, is added to TextField. I try to position of padding: MediaQuery.of(context).viewInsets, to other Widget. but it also doesn't work.

the keyboard cover bottomsheet. help me!!

this is my code.

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

class B20 extends StatefulWidget {
  const B20({Key? key, required this.postNo}) : super(key: key);
  final String postNo;

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

class B20State extends State {
  Map result = {};
  final TextEditingController _textEditingController = TextEditingController();

  void _showModalBottomSheet(BuildContext context) {
    showModalBottomSheet(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
        ),
        backgroundColor: Colors.transparent,
        context: context,
        isScrollControlled: true, // add isScrollControlled
        builder: (context) => _commentBottomSheetContainer(context));
  }

  Widget _commentBottomSheetContainer(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(
            color: Color(0xffffffff),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
            )),
        child: Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), //add padding
          child: TextField(
            keyboardType: TextInputType.text,
            autofocus: true,
            controller: _textEditingController,
            maxLines: 10,
            minLines: 1,
            decoration: InputDecoration(
              hintStyle: TextStyle(
                fontFamily: 'Noto_Sans_KR',
                fontSize: 13.sp,
                color: const Color(0xffABACB2),
              ),
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
              errorBorder: InputBorder.none,
              disabledBorder: InputBorder.none,
              hintText: '댓글을 남겨주세요',
              contentPadding: EdgeInsets.fromLTRB(15.w, -20.h, 15.w, 0.h),
            ),
          ),
        ));
  }

  
  Widget _commentContainer(BuildContext context) {
    return InkWell(
      onTap: () {
        _showModalBottomSheet(context);
      },
      child: Text(
        '댓글을 남겨주세요',
        style: TextStyle(
          fontFamily: 'Noto_Sans_KR',
          fontSize: 13.sp,
          color: const Color(0xffABACB2),
        ),
        textAlign: TextAlign.start,
        softWrap: false,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Container(
        color: Colors.white,
        child: SafeArea(
          child: Scaffold(
            backgroundColor: Colors.white,
            body: _commentContainer(context),
          ),
        ),
      ),
    );
  }
}

user_5197712 · Answer

Add isScrollControlled = true to BottomSheetDialog it'll allow the bottom sheet to take the full required height which gives more insurance that TextField is not covered by the keyboard.

Add Keyboard padding using MediaQuery.of(context).viewInsets.bottom

For reference https://blog.sombex.com/2021/06/move-bottomsheet-along-with-keyboard-in-flutter.html

This question already has the answer in stackoverflow

user_17030358 · Answer

I find my problem.

in main.dart. I delete useInheritedMediaQuery: true,

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      builder: (_, child) {
        return MaterialApp(
          useInheritedMediaQuery: true, // this make problem. I delete it. it work.
          debugShowCheckedModeBanner: false,
          home: MultiProvider(
            providers: [
              ChangeNotifierProvider(
                  create: (BuildContext context) => BottomNavigationProvider()),
              ChangeNotifierProvider(
                  create: (BuildContext context) => B10Provider()),
              ChangeNotifierProvider(
                  create: (BuildContext context) => B20Provider()),
              ChangeNotifierProvider(
                  create: (BuildContext context) => C10Provider()),
              ChangeNotifierProvider(
                  create: (BuildContext context) => C20Provider()),
              ChangeNotifierProvider(
                  create: (BuildContext context) => D10Provider()),
            ],
            child: Home(),
          ),
        );
      },
    );
  }
}

showModalBottomSheet does not move along with keyboard in flutter

2 Answers