Resize the Screen When Keyboard Appears

Flutter Fexible Widget doesn't resize when keyboard shows

I think that you should wrap your container into SingleChildScrollView, maybe that will help you. I would write something like this:

return SingleChildScrollView(
child: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          MessageListView(),
          ChatInputToolbar(),
        ]
      ),)
    );

When the keyboard appears, the Flutter widgets resize. How to prevent this?

Updated Answer

resizeToAvoidBottomPadding is now deprecated.

The updated solution is to set resizeToAvoidBottomInset property to false.

---

Original Answer

In your Scaffold, set resizeToAvoidBottomPadding property to false.

When keyboard is shown, everything is pushed up and I get a error

There are two solutions to this problem.

1. Add resizeToAvoidBottomPadding: false to your Scaffold

   Scaffold(
    resizeToAvoidBottomPadding: false,
   body: ...)
   

2. Put your Scaffold body inside a scrollableView (like SingleChildScrollView or ListView)

   new Scaffold(
       body: SingleChildScrollView(child: //your existing body
   ...)
   

You can find similar problem and answer here

When the keyboard appears, the Flutter TextField needs to resize

Please remove the single child scroll view from this sized box and and it to the column of this text field like

SingleChildScrollView(
  child: Column(
   children: [
     //Other widgets
     SizedBox(
       width: 325,
       child: TextField(
         keyboardType: TextInputType.multiline,
         maxLines: 4,
         style: TextStyle(
           fontSize: 20,
         ),
         decoration: InputDecoration(
         filled: true,
         hintText: "Hoy me siento...",
         border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10)
          ),
          fillColor: Colors.orangeAccent
         ),
       )
      ),
      //Other widgets here
     ]
   )
)

Edit

slidedialog.showSlideDialog(
          context: context,
          barrierColor: Color.fromARGB(108, 101, 99, 99).withOpacity(0.7),
          pillColor: Color.fromARGB(255, 2, 0, 0),
          backgroundColor: Color.fromARGB(229, 242, 242, 246),
          child: StatefulBuilder(builder: (context, _setState) {
            return SingleChildScrollView
   child : Column(
              children: <Widget>[
                const SizedBox(
                  height: 12,
                  width: 300,
                ),
                  TextButton(
                    child: Text(
'${date.day}/${date.month}/${date.year}',
                      style: TextStyle( fontSize: 37,color: Colors.orangeAccent,fontWeight: FontWeight.bold),
                    ),
                    onPressed: () async {
                      DateTime? newDate = await showDatePicker(
                        context: context,
                        initialDate: date,
                        firstDate: DateTime(2000),
                        lastDate: DateTime(2100),
                      );
                      if (newDate == null) return;

                      _setState(() => date = newDate);
                    },
                  ),
                  ElevatedButton(
                    child: Text(ex3?.nom ?? "Elige como te sientes"),
                    onPressed: () {
                      SelectDialog.showModal<UserModel>(
                        context,
                        label: "¿Como te sientes hoy?",
                        items: modelItems,
                        selectedValue: ex3,
                        itemBuilder: (BuildContext context, UserModel item,
                            bool isSelected) {
                          return Container(
                            decoration: !isSelected
                                ? null
                                : BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),
                                    color: Colors.white,
                                    border: Border.all(
                                        color: Theme.of(context).primaryColor),
                                  ),
                            child: ListTile(
                              leading: CircleAvatar(
                                  backgroundImage: AssetImage(item.rutaimage!)),
                              selected: isSelected,
                              title: Text(item.nom),
                              subtitle: Text(item.color),
                            ),
                          );
                        },
                        onChange: (selected) {
                          setState(() {
                            ex3 = selected;
                          });
                        },
                      );
                    },
                  ),
                  Container(
                    height: 120.0,
                    width: 120.0,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: ex3?.image ?? AssetImage("assets/images/2.png"),
                        fit: BoxFit.fill,
                      ),
                      shape: BoxShape.circle,
                    ),
                    child: Text(ex3?.nom ?? "ex: Feliz"),
                  ),
                  SizedBox(
                      width: 325,
                      child: TextField(
                        keyboardType: TextInputType.multiline,
                        maxLines: 4,
                        style: TextStyle(
                          fontSize: 20,
                        ),
                        decoration: InputDecoration(
                            filled: true,
                            hintText: "Hoy me siento...",
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10)),
                            fillColor: Colors.orangeAccent),
                      )),
              ],
            ));
          }));
    }

---

Related Topics