Skip to content

SystemUiMode.edgeToEdge bottom viewInset jumps when keyboard is opening #89914

@naamapps

Description

@naamapps

When using:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
and opening the keyboard there is a slight but very visible jump of the bottom view inset.

When using:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
the view inset is smooth.

Steps to Reproduce

Put this widget as the home of MaterialApp and set the system ui mode to edgeToEdge.
Go back and forth with the system ui modes to see the difference.

Bug Widget
import 'package:flutter/material.dart';

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

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

class _TestWidgetState extends State<TestWidget> {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      bottomNavigationBar: Container(
        color: Theme.of(context).colorScheme.secondaryVariant,
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        padding: const EdgeInsets.only(left: 16, right: 8),
        child: ConstrainedBox(
          constraints: const BoxConstraints(minHeight: kToolbarHeight),
          child: Row(
            children: [
              const CircleAvatar(
                radius: 20,
                backgroundImage: NetworkImage(
                    'https://cdn.pixabay.com/photo/2020/10/01/09/35/bee-5618012_1280.jpg'),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 16, right: 8),
                  child: TextField(
                    maxLines: null,
                    textInputAction: TextInputAction.send,
                    keyboardType: TextInputType.text,
                    minLines: 1,
                    controller: _textEditingController,
                    decoration: const InputDecoration(
                      hintText: 'Comment',
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
              InkWell(
                onTap: () {},
                child: Container(
                  padding:
                      const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                  child: Text(
                    'Post',
                    style: TextStyle(color: Colors.blue[300]),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }
}

Expected results:
There should be no jump of the bottom inset, and the text field should smoothly lock into place.

Actual results:
There is a jump of the text field when opening the keyboard.

Videos:
This is the laggy edge to edge mode:

EdgeToEdge.mp4

This is the smooth manual mode:

Manual.mp4
Flutter Doctor
[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-x64, locale
    en-IL)
    • Flutter version 2.5.0 at /Users/naamapps/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4cc385b4b8 (3 days ago), 2021-09-07 23:01:49 -0700
    • Engine revision f0826da7ef
    • Dart version 2.14.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/naamapps/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (2 available)
    • SM G998B (mobile) • R5CR214C1LM • android-arm64  • Android 11 (API 30)
    • Chrome (web)      • chrome      • web-javascript • Google Chrome
      93.0.4577.63

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: layoutSystemChrome and Framework's Layout Issuesa: text inputEntering text in a text field or keyboard related problemse: OS-version specificAffects only some versions of the relevant operating systemengineflutter/engine related. See also e: labels.found in release: 2.5Found to occur in 2.5found in release: 2.6Found to occur in 2.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions