When the keyboard appears, the Flutter TextField needs to resize-CodePudding

I need help, i'm searching how to resize the textfield when i press it. it gives an error with pixels but i can't resize it. I find a res resizeToAvoidBottom but it needs a scaffold and it changes my design and it don't work so... i don't know how can i do it .

here is the code :

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

The full code is :

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 Column(
              children: <Widget>[
                const SizedBox(
                  height: 12,
                  width: 300,
                ),
                SingleChildScrollView(
                    child: Column(children: [
                  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),
                      )),
                  //Other widgets here
                ]))
              ],
            );
          }));
    }

And this is how it looks... https://i.stack.imgur.com/GH9hs.png

That's the error... https://i.stack.imgur.com/baKCo.png

CodePudding user response：

A simple work around is to add the widget SizedBox inside SingleChildScrollView

Reference: https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

CodePudding user response：

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