So generally I use resizeToAvoidBottomInset: true,
and it works. It was working when I had a Container with a background image but now I have replaced the image with a video as background. To do that I had to put in a Stack but now when the keyboard appears nothing is being pushed up and it shows up over the TextField.
My code :
return Scaffold(
resizeToAvoidBottomInset: true,
body: OrientationBuilder(builder: (context, orientation) {
return SingleChildScrollView(
reverse: true,
child: Stack(
children: [
_controller.value.isInitialized
? SizedBox(
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _controller.value.size.width ?? 0,
height: _controller.value.size.height ?? 0,
child: VideoPlayer(_controller),
),
),
): Container(),
Container(
width: double.infinity,
child: Column(
children: [
SizedBox(
height: isTab ? 20 : 53.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: screenWidth * 0.02),
child: InkWell(
onTap: () {
_controller.pause();
_controller.dispose();
Navigator.of(context).push(
createFadeInRoute(
const HomeScreen()));
},
child: Container(
alignment: Alignment.center,
width: isTab ? 28 : 28,
height: isTab ? 28 : 28,
decoration: BoxDecoration(
color: const Color(0xFF75ABC9),
borderRadius: BorderRadius.circular(5),
boxShadow: const [
BoxShadow(
color: Color(0xFF192D5D),
offset: Offset(0, 1),
blurRadius: 3,
),
],
),
child: Padding(
padding: const EdgeInsets.only(left: 6),
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: isTab ? 23 : 18,
),
),
),
),
),
],
),
SizedBox(
height: isTab
? (orientation == Orientation.portrait
? screenHeight * 0.20
: screenHeight * 0.280)
: screenWidth < 390
? 170.h
: 170.h,
),
ChatBox(
profilePic: widget.profilePic,
userd: widget.guruUserId,
isPlayingAnimatedAudio: _isAnimationAudioEnabled,
isPlayingAudio: _isAudioEnabled,
onToggleAnimationAudio: _toggleAudio,
onToggleBackAudio: _toggleAudioAnimation,
)
],
),
),
],
),
);
}),
);
Now the TextField is part of the Chatbox widget and I want to have the same behavior as it had when there was no stack and a background image as part of Container’s BoxDecoration but so far nothing has worked with a video. inside a Stack widget
2
Answers
Wrap Chatbox with this padding:
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
Try wrapping the Container() which contains the video player with AnimatedPositioned widget and add bottom parameter as following,
This will add bottom padding to the widget & moves the widget with smooth animation.
Sorry I didn’t tested it… But i used this method a lot of time to solve this stacked widget problem..