skip to Main Content

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


  1. Wrap Chatbox with this padding:
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

    Login or Signup to reply.
  2. Try wrapping the Container() which contains the video player with AnimatedPositioned widget and add bottom parameter as following,

    AnimatedPositioned(
                      duration: Duration(milliseconds: 650,curve:Curves.easeIn,
                      bottom: MediaQuery.of(context).viewInsets.bottom > 80? MediaQuery.of(context).viewInsets.bottom : null,
                      child: Container(...),
        )
    

    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..

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search