I have a chat screen which looks like the one below. Everything works perfectly, however when the user taps on the textfield at the bottom, and the keyboard shows up, the background image also gets resized and distorted. I want the image to remain the way it is and the rest of the screen to resize independent of the image when the keyboard shows up.

At first, I had put both the background image and a column with the rest of the screen inside a Stack(). That's when I noticed the image resizing. I tried applying a SingleChildScrollView only to the Column, but since the ListView was inside an Expanded widget, it was failing to load.

Then I removed the Stack and redesigned it like the below:

I am using CachedNetworkImage which loads the image as a DecorationImage in a Container like this:

         body: CachedNetworkImage(
            imageUrl: bgURL,
            placeholder: ((context, url) => const Center(child: CircularProgressIndicator(),)),
            imageBuilder: (context, imageProvider) => Container(
              height: 926.0.h,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: imageProvider,
                  fit: BoxFit.cover,
                ),
              ),

The rest of the screen - the listview and the Row containing the textfield and buttons sit inside a column which is a child of the above mentioned container, like this:

child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.0.w, vertical: 20.0.h),
              child: Column(
                children: [
                  Expanded(
                    ....
                    ....
                    ListView(),
                    ....
                    ....
                  ), // Expanded
                  Row(children: [
                    CircleAvatar(),
                    TextField(),
                    CircleAvatar(),
                  ]), // Row
               ]), // Column
             ), // Padding

I am facing the same problem again with the above structure as well. Again trying to put the Column inside a SingleChildScrollView is failing again. I have checked other solutions and from whatever I could find, most recommend one SingleChildScrollView with AlwaysScrollableScrollPhysics(), and resizeToAvoidBottomInset in the Scaffold. Which is not working in my case, mostly due to the ListView sitting inside the Expanded widget.

CodePudding user response：

Make the background banner image not affected by the presence of the keyboard and set this in Scaffold

resizeToAvoidBottomInset: false,

Official Documentation
Example

CodePudding user response：

Set resizeToAvoidBottomInset: false in the Scaffold. It'll help you resize widgets when keyboard actions happened.