[FIXED] How to set top padding for bottom sheet with text field in Flutter?

Issue

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):

enter image description here

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

enter image description here

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)?

Solution

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);
                                  });
                                },
                              ),
                            )
                          ],
                        ),
                      ));

enter image description here

Answered By – eamirho3ein

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published