如何在 Flutter 的键盘上显示容器上方

Question

I am follow this stack overflow accepted answer Link to display a container widget right above on keyboard if keyboard pops up. But problem is when i try this on my code then this container get hidden if keyboard popsup. How to solve this issue, below is the sample dart code till now what i tried this.

TestPage.dart

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

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

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => ForgotPasswordPage()));
            },
            child: Text('Click'),
          ),
        ),
      ),
    );
  }
}

ForgotPasswordPage.dart

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

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

class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
  final TextEditingController mobileNumber = TextEditingController();
  _ForgotPasswordPageState();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.red,
        appBar: AppBar(
          backgroundColor: Colors.red,
          elevation: 0,
        ),
        body: Stack(children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[TextField()],
            ),
          ),
          Positioned(
            bottom: MediaQuery.of(context).viewInsets.bottom,
            left: 0,
            right: 0,
            child: Container(
              height: 50,
              child: Text("Aboveeeeee"),
              decoration: BoxDecoration(color: Colors.pink),
            ),
          ),
        ])
        );
  }
}

Answer 1

Actually there's a package for that if you open a keyboard on the bottom widget also goes up the package name keyboard_attachable .

Am also using this.

in the package indicate and example like this

return Scaffold(
  body: SafeArea(
    child: FooterLayout(
        footer: Container(
          height: 70.0,
          color: Colors.blue,
        ),
        child: Column(
          children: const [
            Center(child: TextField()),
          ],
        )),
  ),
);

As i copied the code its working fine on me am using nullsafety by the way

testpage.dart

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

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

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => ForgotPasswordPage()));
            },
            child: Text('Click'),
          ),
        ),
      ),
    );
  }
}

and for forgotpasswordpage.dart

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

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

class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
  final TextEditingController mobileNumber = TextEditingController();
  _ForgotPasswordPageState();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        elevation: 0,
      ),
      body: SafeArea(
        child: FooterLayout(
            footer: Container(
              height: 70.0,
              color: Colors.blue,
            ),
            child: Column(
              children: const [
                Center(child: TextField()),
              ],
            )),
      ),
    );
  }
}

Answer 2

import 'package:flutter/material.dart';

  class ForgotPasswordPage extends StatefulWidget {
  const ForgotPasswordPage({
  Key key,
 }) : super(key: key);

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

  class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
  final TextEditingController mobileNumber = TextEditingController();
   _ForgotPasswordPageState();

 @override
 Widget build(BuildContext context) {
  return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.red,
      appBar: AppBar(
       backgroundColor: Colors.red,
      elevation: 0,
    ),
    body: Stack(
     children:[
     Container(
      child: Column(
        children: [
       TextField()
        ],
       ),
    ),
    Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom,
       left: 0,
       right: 0,
    child: Container(
    height: 50,
    child: Text("Aboveeeeee"),
        decoration: BoxDecoration(color: Colors.pink),
   ),
   ),
   ])
   );
   }
 }!

[Result] https://i.stack.imgur.com/9TMix.jpg