底部溢出 11 個像素

Question

顯示鍵盤時，底部溢出像素 flutter，我嘗試了SingleChildSCrollView ，但仍然找不到解決方案。 我的目標是使Get.defaultDialog可滾動。

這是我的代碼：

class AddCard extends StatelessWidget {
  final homeCtrl = Get.find<HomeController>();
  AddCard({super.key});

  @override
  Widget build(BuildContext context) {
    final icons = getIcons();
    var squareWidth = Get.width - 12.0.wp;
    return Container(
      width: squareWidth / 2,
      height: squareWidth / 2,
      margin: EdgeInsets.all(3.0.wp),
      child: InkWell(
        onTap: () async {
          await Get.defaultDialog(
              titlePadding: EdgeInsets.symmetric(vertical: 5.0.wp),
              radius: 5,
              title: 'Task Type',
              content: Form(
                key: homeCtrl.formKey,
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 3.0.wp),
                      child: TextFormField(
                        controller: homeCtrl.editCtrl,
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'title',
                        ),
                        validator: (value) {
                          if (value == null || value.trim().isEmpty) {
                            return 'Please enter your task title';
                          }
                          return null;
                        },
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 5.0.wp),
                      child: Wrap(
                        spacing: 2.0.wp,
                        children: icons
                            .map((e) => Obx(() {
                                  final index = icons.indexOf(e);
                                  return ChoiceChip(
                                    selectedColor: Colors.grey[200],
                                    pressElevation: 0,
                                    backgroundColor: Colors.white,
                                    label: e,
                                    selected: homeCtrl.chipIndex.value == index,
                                    onSelected: (bool selected) {
                                      homeCtrl.chipIndex.value =
                                          selected ? index : 0;
                                    },
                                  );
                                }))
                            .toList(),
                      ),
                    ),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: blue,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20),
                        ),
                        minimumSize: const Size(150, 40),
                      ),
                      onPressed: () {
                        if (homeCtrl.formKey.currentState!.validate()) {
                          int icon =
                              icons[homeCtrl.chipIndex.value].icon!.codePoint;
                          String color =
                              icons[homeCtrl.chipIndex.value].color!.toHex();
                          var task = Task(
                            title: homeCtrl.editCtrl.text,
                            icon: icon,
                            color: color,
                          );
                        }
                      },
                      child: const Text("Confirm"),
                    ),
                  ],
                ),
              ));
        },
        child: DottedBorder(
            color: Colors.grey[400]!,
            dashPattern: const [8, 4],
            child: Center(
              child: Icon(
                Icons.add,
                size: 10.0.wp,
                color: Colors.grey,
              ),
            )),
      ),
    );
  }
}

出錯的小部件是 Get.defaultDialog()。

Answer 1

我真的不能很好地理解你的問題，因為你只發布了部分代碼，但請嘗試用 SingleChildSCrollView 包裝你的“腳手架主體：”。

也許你在錯誤的地方使用了 SingleChildSCrollView

Answer 2

有兩種方式：

1. 您可以在 Scaffold 小部件上使用resizeToAvoidBottomInset屬性。
2. 您可以使用ListView代替Column ：

onTap: () async {
          await Get.defaultDialog(
                  radius: 5,
                  titlePadding: EdgeInsets.symmetric(vertical: 5.0),
                  title: Text('Task Type'),
                  content: SizedBox(
                    height: 500,//your height
                    width: 300, //your width
                    child:
                      Form(
                        child: ListView(
                          children: [
                          Padding(
                                padding: EdgeInsets.symmetric(horizontal: 3.0),
                                child: TextFormField(
                                  decoration: const InputDecoration(
                                    border: OutlineInputBorder(),
                                    labelText: 'title',
                                  ),
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.symmetric(vertical: 5.0),
                               child: Wrap(
                                    spacing: 2.0,
                                    children: List.generate(//replace with your content
                                        100,
                                        (index) => Container( 
                                              height: 20,
                                              width: 50,
                                              padding: EdgeInsets.all(20),
                                              color: Colors.red,
                                            ))),
                              ),
                          ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Colors.blue,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  minimumSize: const Size(150, 40),
                                ),
                                onPressed: () {},
                                child: const Text("Confirm"),
                              ),
                          ],
                        ),
                      ),

                  ),
                ),
              );

為您的對話框提供固定的高度和寬度很重要，在這個定義的區域中，可以使可滾動的小部件工作。

Answer 3

如果您的目標是使對話框可滾動，請使用具有定義高度的ListView 。

為了讓您的SizedBox在出現任何過度復雜的情況下按預期工作，請使用Flexible小部件

試試代碼結構：

GetDialog
 |_Flexible
  |_SizedBox   👈Define proper height and width here
   |_ListView