Question 77760 in Flutter Question posted in
The official Flutter documentation can be found here.

Bottom overflowed by 11 pixels – Flutter

I’m having bottom overflowed by pixels flutter when showing keyboard, i tried SingleChildSCrollView and still couldn’t find the solution for it. my aim to make the Get.defaultDialog scrollable.

here my code :

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

The widget that makes the error is the Get.defaultDialog().

Tags:

3

Answers


  1. 0

    I can’t really understand your question well because you only posted part of the codes, but try wrapping your Scaffold body with SingleChildScrollView.

    maybe you’re using the SingleChildScrollView at a wrong place.

    Login or Signup to reply.
  2. 0

    There are two ways:

    1. You can use the resizeToAvoidBottomInset property on the Scaffold widget.
    2. You can use ListView instead 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"),
                              ),
                          ],
                        ),
                      ),

                  ),
                ),
              );

    It`s important to give your dialog a fixed height and width, in this defined area it’s possible to make a scrollable widget work.

    Login or Signup to reply.
  3. 0

    If your aim is to make the dialog scrollable, Use ListView with defined height.

    Further for your SizedBox to work as expected in case of any overplexes use the Flexible widget

    Try the code structure:

    GetDialog
 |_Flexible
  |_SizedBox   👈Define proper height and width here
   |_ListView
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search