Text Fields hidden behind the Keyboard

[rsbthebest]

Hi,

Let me start by saying this is an awesome plugin which am now using for all of my future projects! Amazing work there!

Now going back to the issue, I am working on an app which has a lot of text fields. I have notices that then the keypad opens about the amount of screen resizing (by Scaffold) which happens with the plugin is way less than what it does without the plugin. This is causing issue for me as the TextFields which is at the bottom of the screen is being covered by the keypad and there is no way to see what are we typing.

Here is my responsive configuration:

MaterialApp( builder: (context, widget) => ResponsiveWrapper.builder( BouncingScrollWrapper.builder(context, widget), maxWidth: 2200, minWidth: 480, defaultScale: true, breakpoints: [ ResponsiveBreakpoint.resize(480, name: MOBILE), ResponsiveBreakpoint.resize(800, name: TABLET), ResponsiveBreakpoint.autoScale(1000, name: DESKTOP), ], ),

Here are the images for reference:

Please have a look and let me know how this can be fixed!

Regards,
Rajdeep Barad

[rayliverified]

Thank you for the kind words and reporting this issue. I'll have a look this weekend!

[prasantco]

Hey @searchy2 ,Fantastic work by you on your library but I'm also facing this issue on app. Please resolve it

[rayliverified]

Feel free to give the problem a tackle and submit a PR with a fix. The library is open source so people can contribute!

[prasantco]

We are try to solve this issue by many ways but we failed. Hey @searchy2 can you please cross-check this issue, actually we are facing this issue on app therefore we need resolution.

[danagbemava]

@searchy2 I run a simulation and it seems that the issue with textview hidden behind the keyboard has to do with the defaultScale value. When it it set to false, the textfield isn't hidden behind the keyboard. It is when it is set to true.
Configuration 1 for the ResponsiveWrapper

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (ctx, widget) => ResponsiveWrapper.builder(
        widget,
        // maxWidth: 1200,
        // minWidth: 480,
        defaultScale: false,
        breakpoints: [
          ResponsiveBreakpoint.resize(480, name: MOBILE),
          ResponsiveBreakpoint.autoScale(800, name: TABLET),
          ResponsiveBreakpoint.resize(1000, name: DESKTOP),
        ],
      ),
      home: HomeScreen(),
    );
  }
}

result

Configuration 2 for the ResponsiveWrapper

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      builder: (ctx, widget) => ResponsiveWrapper.builder(
        widget,
        // maxWidth: 1200,
        // minWidth: 480,
        defaultScale: true,
        breakpoints: [
          ResponsiveBreakpoint.resize(480, name: MOBILE),
          ResponsiveBreakpoint.autoScale(800, name: TABLET),
          ResponsiveBreakpoint.resize(1000, name: DESKTOP),
        ],
      ),
      home: HomeScreen(),
    );
  }
}

result

[rayliverified]

Thanks for investigating and sharing your results. I'll take a look this weekend as I tackle the overlay issue.

[danagbemava]

Sure, I'll be doing some more investigation to see if I can help come up with a fix for it

[prasantco]

@danagbemava @searchy2 If we have set false to defaultScale then UI will not show good

[MaheshPeri19]

Yes. I integrated textfield at bottom of the screen. When i set defaultScale: false, it is working fine, but getting ugly UI and RenderFlex overflowed errors. If defaultScale: true, UI is responsive, but textfied is hidden by keyboard.

[prasantco]

Yes @MaheshPeri19 , you are right. THank u @danagbemava for your support and response. But due to this issue and not getting any helpful/responsive response from @searchy2 till now, so I'm removing this package from app. We are wasting too much time to fix this this issue from our end. Thank you and Sorry @searchy2

[danagbemava]

@danagbemava @searchy2 If we have set false to defaultScale then UI will not show good

I'm aware of this. I only pointed that out so that @searchy2 will have an idea of where to start when he's working on it

[lloretalvaro]

I hope the keyboard problem can be solved soon! The package it's good but the keyboard problem it's a big issue

[afnx]

I was having the same problem. There is a workaround that I'm not sure yet. Set resizeToAvoidBottomPadding and resizeToAvoidBottomInset to false in your Scaffold and wrap your TextField with the widget below:

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

class KeyboardAvoider extends StatelessWidget {
  final Widget child;

  KeyboardAvoider({this.child});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom > 0
            ? (ResponsiveWrapper.of(context).scaledHeight * MediaQuery.of(context).viewInsets.bottom) /
                ResponsiveWrapper.of(context).screenHeight
            : 0,
      ),
      duration: Duration(milliseconds: 300),
      child: child,
    );
  }
}

[lloretalvaro]

@afnx I have tested your possible solution in several devices and at least for me it doesn't work, it's a shame that such a nice package have this type of error.

I hope it can be solved soon! @searchy2

[afnx]

@lloretalvaro Can you try this code in your MaterialApp?

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
        reverse: true,
        padding: EdgeInsets.all(20),
        child: KeyboardAvoider(
          child: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(height: MediaQuery.of(context).size.height / 8),
                Text("TextField 1"),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Type here",
                  ),
                ),
                Container(height: MediaQuery.of(context).size.height / 8),
                Text("TextField 2"),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Type here",
                  ),
                ),
                Container(height: MediaQuery.of(context).size.height / 8),
                Text("TextField 3"),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Type here",
                  ),
                ),
                Container(height: MediaQuery.of(context).size.height / 8),
                Text("TextField 4"),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Type here",
                  ),
                ),
                Container(height: MediaQuery.of(context).size.height / 8),
                Text("TextField 5"),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Type here",
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class KeyboardAvoider extends StatelessWidget {
  final Widget child;

  KeyboardAvoider({this.child});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom > 0
            ? (ResponsiveWrapper.of(context).scaledHeight * MediaQuery.of(context).viewInsets.bottom) /
                ResponsiveWrapper.of(context).screenHeight
            : 0,
      ),
      duration: Duration(milliseconds: 300),
      child: child,
    );
  }