Please add the output of flutter doctor

Are you still seeing this?

Can you please provide a minimal reproduction?

Hi Zoechi, yes, this issue still exists.

[✓] Flutter (Channel dev, v1.0.0, on Mac OS X 10.13.6 17G3025, locale en-US)
    • Flutter version 1.0.0 at [redacted] 
    • Framework revision 5391447fae (6 days ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

Expected

Actual

MCVE

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: List.generate(100, (i) => ListItem(i)),
            ),
          ),
          Container(color: Colors.grey.shade400, child: TextField())
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final int i;
  ListItem(this.i);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 24.0,
      child: Text(i.toString()),
    );
  }
}

Is there any workaround for this? Still happens on iOS.

You could experiment with an animated container which changes its heigh when the textfield gets a focus, but this solution is very hacky. Hope that Flutter team gives us an info on this issue soon, since it would highly improve the smoothness and overall feel of flutter apps

BTW: What‘s really interesting is that the animation is perfectly correct in the flutter promotion videos, such as https://m.youtube.com/watch?time_continue=120&v=_ACWeGGBP4E (look at minute 1:56). Love to hear the opinion from a Flutter team member.

Is there any news?

1- Thankfully in native native iOS development what you'd do is observe keyboardWillShow and keyboardWillHide, grab the NSNotification and extract the animation curve & animation duration to use in your custom animation.

2- BUT... as for native Android there doesn't seem a way to do this. And I think this is where the problem lies. There isn't even an event for plain keyboard showing/disappearing. People use a hack to be notified of this (onGlobalLayout and measure frame difference... SEE THIS!!!)

Issue was already mentioned here and here.

Annoyingly, it hasn't been resolved yet. Which is tedious for satisfying perfectionist stakeholders :).

What‘s really interesting is that the animation is perfectly correct in the flutter promotion videos

Hey, for a promising tech like flutter I would use platform-specific constant durations for these demos 🤷‍♂️

Getting the same issue. Any solution?

Issue persists. Any suggestions to fix it?

Demo.mov.zip

After some research and tests I come up with simplest possible solution for now:

1. Disable default Scaffold insets resizing (not animated)
2. Use AnimatedContainer with padding and calculated bottom inset

You can see small example in gist:
https://gist.github.com/elisar4/1d6a968dc6d5c1096a3dc64567a6ec73

Result:

Not perfect, but better than nothing

@elisar4 Good solution, I ended up with something similar using Keyboard Notification listening via this pub or this.

However my solution and yours are not synced with the keyboard animation's properties (duration, curve) as I mentioned above.

Hello Flutter team, can you give some news around this problem?

This behavior is very annoying for apps that use widgets sticked to the keyboard. It gives the user an uncomfortable experience of watching two animations that should be the same not being the same. It seems like that something broke. It would be great to have a solution.

Facing the same issue. There is a a good 2 seconds delay between keyboard appearing in android and beginning of Scaffold animation (keyboard appears, covers lower part of UI, time passes, UI adjusts with delay showing Text input finally). It doesn't seem to matter how complex UI is - even simple Container lags.

Using real device and Flutter stable, 2.0.6

What I also discovered is that the lag seems to be more prominent when device is set to 120hz instead of 60hz.

This problem would actually be solved if there was a way for Flutter to get the keyboard show/hide animation curve and duration from the OS. Then a simple AnimatedContainer/Size padded with viewInsets and the right curve/duration does the trick.

Any updates?

It is not an actual solution but when we use an AnimatedContainer or AnimatedPadding we can define the duration and a curve, as most of you already know.

The iOS and Android behave differently of course.

Do iOS devices differ from each other in case of duration and curve? For example, do iPhone 8 and iPhone 12 Pro have different keyboard opening and closing animations?

Moreover, I think that Android devices have more differences in many UI elements. So probably they have different curves and durations too.

So it's not possible to put a logic that changes the curve and duration values for each mobile device. Even we do that, the same type of devices may act differently because of for example their empty storage.

Thus, we have to have a direct coupling from the native side.

Writing, note-taking, messaging, commenting are undeniably the core elements of almost any mobile app today. Considering the people gave thumbs up for the issue, it made me wonder why this is not closed by providing a valid & proper solution.

🤔👀

Just commenting to give a brief status to anyone who stumbles upon this issue trying to find a solution for the keyboard animation problem.

Right now the best I have been able to do is, just like @yasinarik mentioned, building an AnimatedContainer with a custom, Flutter-side hardcoded animation controller that tries to imitate the ones Android and iOS apply to animate the keyboard when appearing.

For that, I use:

• Janneman84's crazy_cool_keyboard_for_flutter
• My own implementation of the "AnimatedContainer + custom animation controllers" approach, which I extracted into the keyboard_attachable package to make it easier to reuse the code.

These are still workarounds, but they have proved enough for me to give a visual guide for users.

Hi Flutter team, Apple just release UIKeyboardLayoutGuide for iOS 15.
Would you be able to leverage this new feature to fix the animation for iOS?

Hello Flutter team, when is this issue going to be resolved?

Hi Flutter team, can you give new updates?

This needs more attention (comment to prevents the issue from being closed)

I know it's probably not that easy to implement this feature, but it would make any Flutter iOS App much more native. Anyone who has been using iOS for a few years will immediately recognize that something is wrong.

I raise a PR in flutter engine:flutter/engine#29281
Hoping for review from flutter team.

Here is preview effect
https://user-images.githubusercontent.com/49340347/138431196-83d44c0c-5ade-485b-accb-8af1043f406a.MP4

I raise a PR in flutter engine:flutter/engine#29281 Hoping for review from flutter team.

Here is preview effect https://user-images.githubusercontent.com/49340347/138431196-83d44c0c-5ade-485b-accb-8af1043f406a.MP4

did you have a chance to check out https://developer.apple.com/documentation/uikit/uikeyboardlayoutguide ? Any thoughts on how to support matching a slow keyboard dismiss where you're dragging slowly to swipe away the keyboard?

Oh,I will take a look later @lukepighetti

@luckysmg If this goes well, you really should be promoted @ Alibaba!

Any update for this issue ?????

@Tharuja As has been said a few issues ago, a PR by @luckysmg has been raised. flutter/engine#29281

The PR related to this issue has been merged in flutter engine:flutter/engine#29281

Finally, you put a nail into this 2018 coffin. No matter how annoying this issue is, I never unmuted it waiting for this glorious moment.

For more perspective and thanks to this amazing PR by @luckysmg: flutter/engine#29281, here are the results of what he achieved: BEFORE and AFTER.

Many thanks @luckysmg!

Any update on this issue?

flutter/engine#29281 fixed this, thanks @luckysmg

Just a curiosity, will this be shipped in the next stable version?

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.