0

I have been experimenting with modal sheet witha textfield at the bottom. Modal sheet works fine but somehow I am unable to see the texts that I type. The keypad hides the textfield. I have tried the singlechildscrollview and expanded approach, it doesn't quite solve it. Also, I tried enclosing bottom sheet with scaffold; it somehow takes the entire screen even though I have set the bottom sheet height to 90% of device screen size. How do I solve it?!

Code:

    modalSheet() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Container(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            height: MediaQuery.of(context).size.height * 0.9,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: MediaQuery.of(context).size.height * 0.1,
                  color: Colors.green,
                ),
                Container(
                  height: MediaQuery.of(context).size.height * 0.7,
                  color: Colors.blue,
                ),
                Container(
                  height: MediaQuery.of(context).size.height * 0.1,
                  color: Colors.grey[200],
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16.0, right: 16.0),
                    child: Center(
                      child: TextField(
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          suffixIcon: Icon(Icons.insert_emoticon),
                          hintText: 'Write a comment...',
                          hintStyle: TextStyle(
                              fontSize: 18.0,
                              fontWeight: FontWeight.w600,
                              color: Colors.grey),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        });
  }
Prashant Mishra
  • 309
  • 6
  • 14
  • 2
    [this](https://stackoverflow.com/questions/53869078/how-to-move-bottomsheet-along-with-keyboard-which-has-textfieldautofocused-is-t) might help. – hewa jalal Sep 26 '20 at 06:24
  • @HiwaJalal This totally worked but I have a renderflex overflow of 249 pixels. I don't understand why this is the case even if I have managed the height with mediaquery and all. Can I get some help with this? I have updated the code, kindly have a look. Thanks for your response!! – Prashant Mishra Sep 26 '20 at 07:47
  • 1
    take a look at [this](https://stackoverflow.com/questions/49480051/flutter-dart-exceptions-caused-by-rendering-a-renderflex-overflowed) – hewa jalal Sep 26 '20 at 07:48
  • @HiwaJalal Ok I will, Please have a look in the updated code. Suggest me something. Thanks! – Prashant Mishra Sep 26 '20 at 07:53
  • 1
    i think following the link will fix it, i mean adding a scroll widget on top like `SingleChildScrollView` or `ListView` – hewa jalal Sep 26 '20 at 13:38
  • @HiwaJalal SinglechildScrollView didn't really do the job. I added the widget on the container just before the return statement, it doesn't do anything. Again, very thankful for your help. – Prashant Mishra Sep 26 '20 at 13:59
  • no problem, I am glad that I could help. – hewa jalal Sep 26 '20 at 15:47

0 Answers0