How can i prevent scaffold from resize it's self when keyboard open EXCEPT a specific widget-CodePudding

i have broadcast screen ( in full screen) . i have textField on the same broadcast screen on the bottom so we have here Stack like following

Scaffold(
  body: Stack(
  alignment: Alignment.bottomCenter,
  children:[
  broadCastScreen()
  TextField()
   ]
  )
)

so my layout looks like this

now when i tap on the text field all scaffold resize its self because of the keyboard show up

the good point in this part that my textfieldalways smoothly move to be up the keyboard visible
but the bad part that my broadcast screen resize its self inappropriately for the user experience

so i decide to prevent that annoying party with set resizeToAvoidBottomInset to false

well now everything sound good , but i noticed that my keyboard covering my text field

so How Can i use resizeToAvoidBottomInsetto all my widgets except my textfield part ?

i tried to wrap my textfield with another scaffold with set resizeToAvoidBottomInset to true and scaffold color to transparent so others widgets be visible and tis work as expected but i completely faced problems with GestureDetector pointers in my first scaffold and thats because my second scaffold stack it

another solution i tried programmatically to set my textfield bottom padding to be the same of my keyboard height using EdgeInsets.fromWindowPadding(WidgetsBinding.instance.window.viewInsets,WidgetsBinding.instance.window.devicePixelRatio);

but that's not perfect way because there is some delay with height keyboard value like 900 millisecond to get the keyboard height Furthermore it i tested it on several difference phones and i got null height with some devices It does not guarantee the measurement of all phones

any other perfect way friend ?

CodePudding user response：

 Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(
        fit: StackFit.expand,
        children: [
          SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
               Content()
          ]
          Positioned(
            bottom: 0,
            child: 
                child: TextFormField(
                  decoration: InputDecoration(filled: true, fillColor: 
                  Colors.red
                  ),
                ),
          )
        ],
      ),
    );

Simply Wrap your content in SingleChildScrollView and wrap your TextField in Positioned widget set bottom parameter of Positioned to Zero, add

 fit: StackFit.expand,

Note: Don't forget to add above code to your Stack Widget

CodePudding user response：

Let's try to do something like this

  Scaffold(
  body: Stack(
  alignment: Alignment.bottomCenter,
  children:[
  Positioned.fill(child:
  broadCastScreen()), 
  Position(
  bottom:0, 
  child: TextField()) 
   ]
  )
)