I need 80 pixel top padding (so AppBar to be shown) for my bottom sheet when keyboard is visible and when keyboard is not visible.

This is my code:

import 'package:flutter/material.dart';

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {

  MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  late ScrollController scrollController;

  List<String> messages = [
    "msg1", "msg2", "msg3", "msg4", "msg5", "msg6", "msg7", "msg8", "msg9", "msg10",
  ];

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                  shape: const RoundedRectangleBorder(
                      borderRadius:
                      BorderRadius.vertical(top: Radius.circular(25.0))),
                  backgroundColor: Colors.yellow,
                  context: context,
                  isScrollControlled: true,
                  builder: (context) => Padding(
                    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: SizedBox(
                      height: MediaQuery.of(context).size.height - 80,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          SingleChildScrollView(
                            child: Column(
                              children: [
                                for (var m in this.messages) ...[
                                  Text(m)
                                ]
                              ],
                            ),
                          ),
                          TextField(
                            textAlign: TextAlign.left,
                            decoration: InputDecoration(
                              hintText: 'Message',
                              contentPadding: EdgeInsets.all(10),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              isDense: true,
                            ),
                            keyboardType: TextInputType.multiline,
                            maxLines: 4,
                            minLines: 1,
                            //controller: textController,
                            textInputAction: TextInputAction.send,
                            onSubmitted: (value) {
                              this.setState(() {
                                this.messages.add(value);
                              });
                            },
                          )
                        ],
                      ),
                    ),
                  )
              );
            },
            child: const Text('Show Modal Bottom Sheet'),
          ),
        ));
  }
}

When keyboard is not visible everything is ok (system top panel is visible and AppBar is visible):

However, when keyboard is visible I have a problem as bottom sheet covers both top panel and and AppBar:

Could anyone say how to fix this problem so top panel and AppBar to be visible in both cases (when keyboard is on and when it is off)?

CodePudding user response：

Instead of wrap your whole bottom sheet with padding, try wrap your textField with padding, like this:

builder: (context) => SizedBox(
                        height: MediaQuery.of(context).size.height - 80,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SingleChildScrollView(
                              child: Column(
                                children: [
                                  for (var m in this.messages) ...[Text(m)]
                                ],
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(
                                  bottom:
                                      MediaQuery.of(context).viewInsets.bottom),
                              child: TextField(
                                textAlign: TextAlign.left,
                                decoration: InputDecoration(
                                  hintText: 'Message',
                                  contentPadding: EdgeInsets.all(10),
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10.0),
                                  ),
                                  isDense: true,
                                ),
                                keyboardType: TextInputType.multiline,
                                maxLines: 4,
                                minLines: 1,
                                //controller: textController,
                                textInputAction: TextInputAction.send,
                                onSubmitted: (value) {
                                  this.setState(() {
                                    this.messages.add(value);
                                  });
                                },
                              ),
                            )
                          ],
                        ),
                      ));