[iOS] Support keyboard animation on iOS

[luckysmg]

This PR supports FlutterViewController switch keyboard with smooth animation

Before:

no_animation.MP4

What I have done:

with_animation.MP4

List which issues are fixed by this PR. You must list at least one issue.
flutter/flutter#19279
flutter/flutter#92248

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See testing the engine for instructions on
  writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the CLA.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[nikitadol]

Great PR

Keyboard animation has a curve
https://developer.apple.com/documentation/uikit/uiresponder/1621613-keyboardanimationcurveuserinfoke

[yasinarik]

@luckysmg Thank you for putting in all this effort. I hope it won't take too much time for this PR to be merged. Congrats.

According to the video, it animates and pushes the available area smoothly.

Please forgive me if these are already included but I want to emphasize two important features :

1. Let custom input for the animation duration and curve
2. Allow keyboard dragging first and decide to open or close the keyboard after the drag ends. For example, WhatsApp and Telegram apps are allowing such behavior. The keyboard moves according to the touch drag so it can have mid offset values. It will be more native.

[luckysmg]

Yes.The keyboard animation has a curve with rawValue 7
But I found that the animation still sync with keyboard animation when I didn't set the animation curve.
I think Apple did something in iOS SDK to sync this animation curve implicitly @nikitadol

[nikitadol]

Yes.The keyboard animation has a curve with rawValue 7 But I found that the animation still sync with keyboard animation when I didn't set the animation curve. I think Apple did something in iOS SDK to sync this animation curve implicitly @nikitadol

It looks like it's a coincidence. I think it is better to use curves if there are any (this is just a couple of lines of code)

[luckysmg]

yeah，i will add that code later😁 发自我的iPhone

…

------------------ Original ------------------ From: Nikita Dauhashei ***@***.***> Date: Fri,Oct 22,2021 1:02 PM To: flutter/engine ***@***.***> Cc: WenJingRui ***@***.***>, Author ***@***.***> Subject: Re: [flutter/engine] Support keyboard animation on iOS (PR #29281) Yes.The keyboard animation has a curve with rawValue 7 But I found that the animation still sync with keyboard animation when I didn't set the animation curve. I think Apple did something in iOS SDK to sync this animation curve implicitly @nikitadol It looks like it's a coincidence. I think it is better to use curves if there are any (this is just a couple of lines of code) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[nikitadol]

@luckysmg

setAnimationCurve is deprecated
https://developer.apple.com/documentation/uikit/uiview/1622588-setanimationcurve?language=objc

Need use https://developer.apple.com/documentation/uikit/uiview/1622515-animatewithduration

[luckysmg]

I know,but I don't know how use this in UIViewAnimationOptions in

 [UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^{
            
        } completion:^(BOOL finished) {
            
        }]

Because the keyboard animation curve is not a public value with 7.So I'm not sure how to write it.
Could you give me a code ? Thx😄 @nikitadol

[nikitadol]

I know,but I don't know how use this in UIViewAnimationOptions in

 [UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^{
            
        } completion:^(BOOL finished) {
            
        }]

Because the keyboard animation curve is not a public value with 7.So I'm not sure how to write it. Could you give me a code ? Thx😄 @nikitadol

For iOS >= 10

        let curve = UIView.AnimationCurve(rawValue: curveValue)!

        let animator = UIViewPropertyAnimator(
            duration: duration,
            curve: curve
        ) {
            self.keyboardAnimationView.frame = CGRect(0, insetBottomEndValue, 0, 0)
        }
        
        animator.startAnimation()
        
        animator.addCompletion { finalPosition in
            if (finalPosition == .end) {
                self.keyboardAnimationLink.invalidate()
                self.keyboardAnimationLink = nil
            }
        }

[luckysmg]

Got it , I will try it. Thx

[luckysmg]

I have tested the new animation api.If use new API,the code will be a lot.
So,If this plan is available（refresh with displaylink）and flutter team adopt this .I will add new Animation API in this code if necessary @nikitadol.😄

[nikitadol]

You are using setAnimationCurve which is deprecated

If Apple decides to remove it in iOS 16, then no one can build the Flutter app until this code is updated

And if it does update, then everyone will have to update the Flutter version (although this can take months or years)

I mean, Apple marked this API out of date 2 years ago for a reason
And it will be very unpleasant to rewrite this code again

[luckysmg]

Yes,if flutter team agrees the plan in this code (refresh with displaylink and get interpolation in a view),I will add new animation API immediately。I will never use a deprecated API in this PR after flutter team agrees this plan😄

[luckysmg]

I thought about it..I just use new API directly for review😄...@nikitadol

[Oleh-Sv]

@luckysmg it looks really better 👍

Did you try to make flutter view as subview of root view and update constant of constraint with parallel update of viewMetrics in onDisplay method?

[gaaclarke]

LGTM, thanks!

[joellurcook]

This PR introduces an issue for SafeArea widgets when maintainBottomViewPadding is set to true - the bottom viewPadding is not respected at all times during the animation.

SafeArea contains the following test:

if (data.padding.bottom == 0.0 && data.viewInsets.bottom != 0.0 && maintainBottomViewPadding)
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

However, it is possible for padding.bottom to be > 0.0 whilst viewInsets.bottom != 0.0 during animation.

I would suggest something more like:

if (data.padding.bottom < data.viewPadding.bottom &&
        data.viewInsets.bottom != 0.0 &&
        maintainBottomViewPadding) 
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

I have not tested this fix extensively, but it appears to work fine for iOS

[gaaclarke]

Hey @joellurcook , nice detective work. I recommend first filing an issue to describes the problem (with animations a screen recording can help communicate the problem). Then put your proposed change in a PR and link the issue. That's the proper method to get eyeballs on your problem/suggestion.

[nizwar]

Hi, i just wonder how to not use this? for me all good and feel smooth, but my client not really like the animation

[luckysmg]

What conflict，could you give me a demo code？ 发自我的iPhone

…

------------------ Original ------------------ From: rizzi ***@***.***> Date: Wed,Feb 23,2022 2:20 PM To: flutter/engine ***@***.***> Cc: WenJingRui ***@***.***>, Mention ***@***.***> Subject: Re: [flutter/engine] [iOS] Support keyboard animation on iOS (PR#29281) it make confict when the container and keyboard change toggle show hide @luckysmg I want close it animation — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[yyong37]

@nizwar as my test, wrap with MediaQuery can do

[dhnghia22]

@luckysmg hello, thanks for your contribute, but i got some problem with this feature, modalBottomSheet and dialog have small animation change position when keyboard appear or dismiss, so same question with @nizwar, anyway to not use this ?

[luckysmg]

Hi @dhnghia22 ,maybe this is the same issue like flutter/flutter#97609 in framework side

[aurangzaibsiddiqui]

Hi @luckysmg

This is a pretty neat update to the iOS Flutter experience.

However, it is causing issues for my chat application. As you can see in the attached video, the smooth keyboard animation is quite visibly janky (even in release mode). This jank was not there when the animation was not smooth (i.e. before you submitted your fix).

Is there some way to address the jank? If not, is it possible to not use the smooth animation at all (like previously).

RPReplay_Final1654775077.MP4

[NghiaDinhShopiness]

Hi @dhnghia22 ,maybe this is the same issue like flutter/flutter#97609 in framework side

I still got this problem when upgrade to flutter 3.0.3

RPReplay_Final1656216934.MP4

On video below, AlertDialog move up when keyboard appear, and dialog have unexpected animation when display when keyboard dismiss. Anyway to fix it.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  showAlertDialog(BuildContext context) {
    // set up the button
    Widget okButton = TextButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("My title"),
      content: Text("This is my message."),
      actions: [
        okButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('Display Alert with keyboard'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 50),
              child: Column(
                children: [
                  TextButton(
                      onPressed: () {
                        FocusManager.instance.primaryFocus?.unfocus();
                        showAlertDialog(context);
                      },
                      child: Text('Button')),
                  SizedBox(width: 200, child: TextField())
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

flutter --version

Flutter 3.0.3 • channel unknown • unknown source
Framework • revision 676cefaaff (3 days ago) • 2022-06-22 11:34:49 -0700
Engine • revision ffe7b86a1e
Tools • Dart 2.17.5 • DevTools 2.12.2

[luckysmg]

Hi @aurangzaibsiddiqui
Apology for the delay response. I think this is a framework side issue,but this issue may come out from your code.
I don't know how you write this chat page. But maybe this is caused by the abuse of MediaQuery.of(Context). If the context is your page's context, your whole page will be rebuilt again in every frame of keyboard animation..which is very bad.

However, if you wrap something you need to change with a Builder widget, only the widget in builder will be rebuild during animation.

Here is the simple code using for framework side.

class TextFieldPage extends StatefulWidget {
  const TextFieldPage({Key? key}) : super(key: key);
  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {

  @override
  Widget build(BuildContext context) {
    print("page build");
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          const Spacer(),
          const Text('Keyboard animation', style: TextStyle(fontSize: 26)),
          const Spacer(),
          Builder(builder: (BuildContext builderCtx) {
            print('builder build');
            return SizedBox(
              /// If you use context, the whole page will be rebuild, you will see log "page build" and "builder build",
              /// but use builderCtx (after change you need to hot restart or recreate this page)
              /// you will only see log "builder build"
                height: 60 + MediaQuery.of(builderCtx).padding.bottom,
                child: const CupertinoTextField(
                  decoration: BoxDecoration(color: Colors.red),
                ));
          }),
        ],
      ),
    );
  }
}

[flutter-dashboard]

This pull request was opened against a branch other than main. Since Flutter pull requests should not normally be opened against branches other than main, I have changed the base to main. If this was intended, you may modify the base back to master. See the Release Process for information about how other branches get updated.

Reviewers: Use caution before merging pull requests to branches other than main, unless this is an intentional hotfix/cherrypick.