Failing to Make the keyboard push the screen up upon input in my flutter app

0

i want when the user wants to input something, the keyboard should push the screen up instead of creating an error, i don't want the keyboard to cover on top of the screen by setting "resizeToAvoidBottomPadding" to true is what most people suggested but it covered on top of everything instead of pushing the screen up, here is my code,

error when the keyboard appears

here is my code below

Container(),
              content == 'livechat'
                  ? Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                          Container(
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                SizedBox(
                                    width: MediaQuery.of(context).size.width *
                                        2.5 /
                                        100),
                                Bounce(
                                    duration: Duration(milliseconds: 110),
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Container(
                                        child: Text("Minimize",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    2 /
                                                    100,
                                                fontWeight: FontWeight.w400)))),
                                Spacer(),
                                Bounce(
                                    duration: Duration(milliseconds: 110),
                                    onPressed: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Container(
                                        child: Text("Close",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    2 /
                                                    100,
                                                fontWeight: FontWeight.w400)))),
                                SizedBox(
                                    width: MediaQuery.of(context).size.width *
                                        2.5 /
                                        100)
                              ])),
                          SizedBox(
                              height:
                                  MediaQuery.of(context).size.height * 5 / 100),
                          Container(
                              height:
                                  MediaQuery.of(context).size.height * 6 / 100,
                              width: MediaQuery.of(context).size.width,
                              decoration: BoxDecoration(
                                  border: Border(
                                bottom: BorderSide(
                                  //                   <--- left side
                                  color: Color(0xff333333),
                                  width: 1.0,
                                ),
                                top: BorderSide(
                                  //                   <--- left side
                                  color: Color(0xff333333),
                                  width: 1.0,
                                ),
                              )),
                              child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: <Widget>[
                                    SizedBox(
                                        width:
                                            MediaQuery.of(context).size.width *
                                                2.5 /
                                                100),
                                    Container(
                                        child: Text("Connnected to Chat",
                                            style: TextStyle(
                                                color: Color(0xffffffff),
                                                fontFamily: 'Montserrat',
                                                fontSize: MediaQuery.of(context)
                                                        .size
                                                        .height *
                                                    1.7 /
                                                    100,
                                                fontWeight: FontWeight.w400))),
                                  ])),
                          SizedBox(
                              height:
                                  MediaQuery.of(context).size.height * 1 / 100),
                      
                                Container(
                                    height: MediaQuery.of(context).size.height *
                                        30/
                                        100,
                           child:ListView( 
    scrollDirection: Axis.vertical,
    children: <Widget>[

                                          Container(
                                              height: MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  6 /
                                                  100,
                                              width: MediaQuery.of(context)
                                                  .size
                                                  .width,
                                              decoration: BoxDecoration(),
                                              child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.start,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.center,
                                                  children: <Widget>[
                                                    SizedBox(
                                                        width: MediaQuery.of(
                                                                    context)
                                                                .size
                                                                .width *
                                                            2.5 /
                                                            100),
                                                    Container(
                                                        width:
                                                            MediaQuery.of(context)
                                                                    .size
                                                                    .width *
                                                                90 /
                                                                100,
                                                        child: Text(
                                                            "Support : Hi there, how can we help?",
                                                            style: TextStyle(
                                                                color: Color(
                                                                    0xffffffff),
                                                                fontFamily:
                                                                    'Montserrat',
                                                                fontSize: MediaQuery.of(
                                                                            context)
                                                                        .size
                                                                        .height *
                                                                    1.7 /
                                                                    100,
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w400))),
                                                  ]))
                                        ])),
                        

                                Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                    decoration: BoxDecoration(
                                      color: Color(0xff131313),
                                    ),
                                    height: MediaQuery.of(context).size.height *
                                        6 /
                                        100,
                                    child: TextField(
                                      keyboardType: TextInputType.multiline,
                                      maxLines: 15,
                                      style: TextStyle(
                                          fontSize: MediaQuery.of(context)
                                                  .size
                                                  .height *
                                              1.5 /
                                              100,
                                          color: Color(0xffa6a6a6)),
                                      decoration: InputDecoration(
                                          contentPadding: EdgeInsets.all(
                                              MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  2.1 /
                                                  100),
                                          border: InputBorder.none,                                                                                                             
                                          hintText: 'Type your Message here',                                                                                              

                                                                                                                                           
                                          hintStyle: TextStyle(
                                              fontSize: MediaQuery.of(context)
                                                      .size
                                                      .height *
                                                  1.9 /
                                                  100,
                                              color: Color(0xffa6a6a6))),
                                    )),
                                SizedBox(
                                    height: MediaQuery.of(context).size.height *
                                        2 /
                                        100),
                                Container(
                                    height: MediaQuery.of(context).size.height *
                                        6 /
                                        100,
                                    width: MediaQuery.of(context).size.width *
                                        95 /
                                        100,
                                    child: ElevatedButton(
                                      onPressed: () {
                                        // Respond to button press
                                      },
                                      child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: <Widget>[
                                            Text("Send",
                                                style: TextStyle(
                                                    color: Color(0xffffffff),
                                                    fontFamily: 'Montserrat',
                                                    fontSize:
                                                        MediaQuery.of(context)
                                                                .size
                                                                .height *
                                                            1.4 /
                                                            100,
                                                    fontWeight:
                                                        FontWeight.w600))
                                          ]),
                                    ))
                              ])
                    
                        ]))
javascript
flutter
dart
asked on Stack Overflow Apr 16, 2021 by mac

1 Answer

0

Simply wrap the entire root container into SingleChildScrollView so that it would scroll automatically when the keyboard pops up. For reference refer to https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html.

answered on Stack Overflow Apr 16, 2021 by N. Joshi

User contributions licensed under CC BY-SA 3.0