Flutter Keyboard makes widgets hide-CodePudding

I have the problem that when I open the keyboard it hides the widgets behind it (screen is not resizing). I saw some solutions in differents threads but none worked with me! tried the following:

using the option of resizeToAvoidBottomInset: true inside the scafold.
using singlechildscroll view.
using EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom).

The detailed code is below, please note that class Background() is to do some shading on the background, will also put its code in different code box.

main code:

      Scaffold(
  resizeToAvoidBottomInset: true,
  key: _scaffoldkey,
  backgroundColor: Colors.transparent,
  body: Container(
    padding:
        EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        const Background(),
        Column(
          children: [
            Container(
              alignment: Alignment.topCenter,
              padding: EdgeInsets.fromLTRB(0, 200.h, 0, 0),
              child: Text(
                "HELPER",
                style: GoogleFonts.lato(
                  fontStyle: FontStyle.normal,
                  color: Color.fromARGB(255, 245, 91, 165),
                  fontSize: 30.sp,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                softWrap: false,
              ),
            ),
            Expanded(
              child: Container(
                  alignment: Alignment.topCenter,
                  child: loading
                      ? const Center(
                          child: CircularProgressIndicator(),
                        )
                      : currentstate ==
                              MobVerificationState.SHOW_MOBILE_FORM_STATE
                          ? getMobileFormWidget(context)
                          : getOtpFormWidget(context)),
            ),
          ],
        ),
      ],
    ),
  ),
);

the problem is with getMobileFormWidget(context) and getOtpFormWidget(context)) they are different states, each is column which contains some widgets inside.

the background class code:

       return ShaderMask(
  shaderCallback: (bounds) => const LinearGradient(
    colors: [
      Color.fromARGB(255, 248, 247, 247),
      Color.fromARGB(255, 245, 91, 165),
    ],
    begin: Alignment.centerLeft,
    end: Alignment.bottomCenter,
  ).createShader(bounds),
   child: Container(
    color: Colors.white,
  ),
);

CodePudding user response：

You should use resizeToAvoidBottomInset: false, and the screen will be automatically elevated to the keyboard border, example:

Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent,
        body: Container(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Stack(
            alignment: Alignment.topCenter,
            children: <Widget>[
              ShaderMask(
        shaderCallback: (bounds) => const LinearGradient(
          colors: [
            Color.fromARGB(255, 248, 247, 247),
            Color.fromARGB(255, 245, 91, 165),
          ],
          begin: Alignment.centerLeft,
          end: Alignment.bottomCenter,
        ).createShader(bounds),
        child: Container(
          color: Colors.white,
        ),
      ),
        Column(
          children: [
            Container(
              alignment: Alignment.topCenter,
              //padding: EdgeInsets.fromLTRB(0, 200, 0, 0),
              child: Text(
                "HELPER",
                
                textAlign: TextAlign.center,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                softWrap: false,
              ),
            ),
            Expanded(
              child: Container(
                  alignment: Alignment.topCenter,
                  child: 
                      ListView.builder(
                        itemCount: 10,
                        itemBuilder: (build, index){
                        return TextField();
                      }))
            ),
          ],
        ),
      ],
    ),
  ),
);

I used a random listView to clarify, instead of the getMobileFormWidget and getOtpFormWidget that you didn't provide with your code.

CodePudding user response：

after two days of trials nothing worked except the code below, I adapted it to my code.

 import 'dart:ui';
 import 'package:flutter/material.dart';

 class KeyboardPaddingTest extends StatefulWidget {
 const KeyboardPaddingTest({Key? key}) : super(key: key);

 @override
 _KeyboardPaddingTestState createState() => _KeyboardPaddingTestState();
  }

 class _KeyboardPaddingTestState extends State<KeyboardPaddingTest> {
 EdgeInsets _viewInsets = EdgeInsets.zero;
 SingletonFlutterWindow? window;
 final _textFieldController = TextEditingController();

 @override
 void initState() {
 super.initState();
 window = WidgetsBinding.instance?.window;
 window?.onMetricsChanged = () {
  setState(() {
    final window = this.window;
    if (window != null) {
      _viewInsets = EdgeInsets.fromWindowPadding(
        window.viewInsets,
        window.devicePixelRatio,
      ).add(EdgeInsets.fromWindowPadding(
        window.padding,
        window.devicePixelRatio,
      )) as EdgeInsets;
    }
    });
    };
    }

  @override
  Widget build(BuildContext context) {
  return Container(
  width: double.infinity,
  height: double.infinity,
  color: Colors.greenAccent[100],
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: EdgeInsets.only(bottom: _viewInsets.bottom),
    child: Column(
      children: [
        Expanded(
          child: Center(
            child: Container(
              width: 200.0,
              color: Colors.lightBlueAccent[100],
              child: TextField(
                controller: _textFieldController,
                decoration: const InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Tap to show keyboard',
                ),
              ),
            ),
          ),
        ),
        const Text(
          'Testing Keyboard',
          style: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
      ),
      ),
      );
      }
      }