How to show container above on keyboard in 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),
            ),
          ),
        ])
        );
  }
}

@AnmolMishra i am referring to container widget above keyboard when popup — Mohammed Nabil, Dec 09 '21 at 12:22

Arbiter Chil · Answer 1 · 2021-12-09T13:52:28.353

0

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()),
              ],
            )),
      ),
    );
  }
}

edited Dec 09 '21 at 13:52

answered Dec 09 '21 at 12:19

Arbiter Chil

1,061
1
6
9

i think using package is not the solution for this. – G H Prakash Dec 09 '21 at 12:26
Every packages is have a repo you can copy the codes or if you don't want to put the package. – Arbiter Chil Dec 09 '21 at 12:32
@ArbiterChil Here same problem, the attachment footer (container) goes hidden when keyboard popsup means goes back side – Mohammed Nabil Dec 09 '21 at 12:38
@MohammedNabil thus you use the package? i update my answer i usually do this on some texfield below on some pages of my project. – Arbiter Chil Dec 09 '21 at 12:45
@ArbiterChil Still doesn't work, this is my code. `return Scaffold( resizeToAvoidBottomInset: false, body: SafeArea( child: FooterLayout( footer: Container( height: 30.0, color: Colors.black, ), child: TextField()), ), );` – Mohammed Nabil Dec 09 '21 at 12:50
@MohammedNabil i updated my ansswer remove the resizeToAvoidBottomInset this is the one that disabling it try it or copy the code i edited just now – Arbiter Chil Dec 09 '21 at 13:15
@ArbiterChil Still doesn't work. Do one thing copy the code of `testpage.dart` and then on `forgotpasswordpage.dart` paste your `keyboard_attachable` code you will understand the issue – Mohammed Nabil Dec 09 '21 at 13:26
Okay w8 ill try copy the forgotpasswordpage.dart – Arbiter Chil Dec 09 '21 at 13:32
@ArbiterChil Create two pages, on first page copy the code of `testpage.dart` and past on first page and on second page copy your code and paste it on second page. – Mohammed Nabil Dec 09 '21 at 13:34
@MohammedNabil it fine on my end if you have still encountering it you can send me some code on my email and lets talk about and i might be able to help you as my email a.chil6663@gmail.com or would like to move this on chat. – Arbiter Chil Dec 09 '21 at 13:53

Awais Rehman · Answer 2 · 2021-12-09T13:59:35.173

0

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

edited Dec 09 '21 at 13:59

answered Dec 09 '21 at 12:22

Awais Rehman

574
3
10

It doesn't work and if i remove stack widget then it shows error widget. – Mohammed Nabil Dec 09 '21 at 12:28
check now i edited – Awais Rehman Dec 09 '21 at 12:34
Paste that code in dartpad you will find many errors – Mohammed Nabil Dec 09 '21 at 12:36
brackets and circular error you may set it – Awais Rehman Dec 09 '21 at 13:08
what do you want to actual to bcz its working fine – Awais Rehman Dec 09 '21 at 13:12
@Awais Rehman You did not understand my question i have clearly mention that link especially accepted answer. i want like that but unable to get that – Mohammed Nabil Dec 09 '21 at 13:13
check the image i shared – Awais Rehman Dec 09 '21 at 13:16
its not code issue check issue from another side or maybe mobile issue – Awais Rehman Dec 09 '21 at 13:19
this `Container( child: Column( children:[TextField()], ), ),` under which child? – Mohammed Nabil Dec 09 '21 at 13:23
i checked your code above its fine working good not mine – Awais Rehman Dec 09 '21 at 13:24
I referring your code. – Mohammed Nabil Dec 09 '21 at 13:26
Did you try on dartpad ? – Mohammed Nabil Dec 09 '21 at 13:28
i checked on my project i copy your code and pasted in my code its working fine – Awais Rehman Dec 09 '21 at 13:29
leave my code your code is absolutely fine – Awais Rehman Dec 09 '21 at 13:29
I really don't understand that `container` which has `TextField` is in which child ? Also you have added an attachment but how it works. I put your code on dartpad but it is showing errors – Mohammed Nabil Dec 09 '21 at 13:32
leave my code bro you code is working fine .... ive tested your code – Awais Rehman Dec 09 '21 at 13:45
So did you also use `testpage.dart` and navigate to `forgotpasswordpage.dart` ? If not then try it you will find issue. – Mohammed Nabil Dec 09 '21 at 13:47
ive checked with testpag.dart also working fine and good :-) – Awais Rehman Dec 09 '21 at 13:49

How to show container above on keyboard in Flutter

2 Answers2