键盘在颤动中隐藏了我的底部工作表文本字段

Question

键盘在颤动中隐藏了我的底部工作表文本字段。 我为文本字段打开了一个底部工作表，但是当开始输入一些文本时，键盘打开并隐藏文本字段底部工作表和“保存”按钮，所以无法看到我在文本字段中输入的内容。

见下图

我想要这个结果：

代码：

点击“+添加”按钮打开底部工作表。

showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return Form(
                      key: formKey,
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        height: MediaQuery.of(context).size.height/4.5,
                        // color: Colors.red,
                        child: Column(
                          children: <Widget>[
                            Container(
                              padding: const EdgeInsets.all(10),
                              child: TextFormField(
                                controller: _noteTextController,
                                maxLines: 2,
                                 minLines: 2,
                                decoration: InputDecoration(
                                  hintText: "Add Note",
                                  border: InputBorder.none
                                ),
                                validator: (value){
                                  if(value.trim().isEmpty){
                                    return 'Notes can\'t be empty';

                                  } else {
                                    return null;
                                  }
                                },
                              ),
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              width: MediaQuery.of(context).size.width,
                              // color: Colors.black,
                              alignment: Alignment.topRight,
                              child: InkWell(
                                onTap: (){
                                  if (formKey.currentState.validate()) {
                                    formKey.currentState.save();
                                    DateTime noteDate = DateTime.now();
                                    setState(() {
                                      notes.add(
                                        NoteModel(
                                          date: noteDate,
                                          noteText: _noteTextController.text
                                        )
                                      );
                                    });
                                    Navigator.of(context).pop();
                                    _noteTextController.clear();
                                  }

                                },
                                child: Container(
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: Colors.blue,
                                    borderRadius: BorderRadius.circular(8)
                                  ),
                                  width: MediaQuery.of(context).size.width/5,
                                  height: MediaQuery.of(context).size.height/25 ,
                                  child: Text("Save", style:TextStyle(
                                    color: Colors.white,
                                    fontSize: 19
                                  )),
                                ),
                              ),

                            )
                          ],
                        ),
                      ),
                    );
                  }, 

                );

Answer 1

这是一个适合您的用例的简单解决方法：

使用您示例中的最少代码，尝试使用AnimatedPadding 包装小部件并将其包装在SingleChildScrollView 内以从底部推动BottomSheet，从而防止键盘重叠。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: 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: const MyStatelessWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton.icon(
        icon: Icon(
          Icons.add,
          color: Colors.blue,
        ),
        label: Text(
          'Add',
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
        onPressed: () {
          showModalBottomSheet<void>(
            // isScrollControlled: true,
            context: context,
            builder: (BuildContext context) {
              return Form(
                key: key,
                child: SingleChildScrollView(
                  child: AnimatedPadding(
                    padding: MediaQuery.of(context).viewInsets,
                    duration: const Duration(milliseconds: 100),
                    curve: Curves.decelerate,
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(10),
                          child: TextFormField(
                            maxLines: 2,
                            minLines: 2,
                            decoration: InputDecoration(
                                hintText: "Add Note", border: InputBorder.none),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}