Requirements describe

Recently, when I was working on a project, I had a requirement that users review an item they had purchased, and if they gave a bad review, they had to enter a reason. And the input box is a separate layer that pops up from the bottom.

Demand analysis

To get this requirement, you can simply showModalBottomSheet + textfield.

/// Ignore the style
showModalBottomSheet(
  isScrollControlled: true./ /! important
  builder: (BuildContext context) {
    return Container(
        child: TextField(
              keyboardType: TextInputType.text,
              autofocus: true)); });Copy the code

Ok, run and find the problem.

After I clicked on the input box, the pop-up keyboard blocked the input box.

I am very square, why the keyboard does not push the input box up, it is not the same as I thought.

The solution

Using the AnimatedPadding widget, let’s see how it is explained. Well, it’s an animated version of the Padding, and we’ll just use it to add a Padding to our input box when we’re talking on the keyboard. All is well!!

/// Animated version of [Padding] which automatically transitions the /// indentation over a given duration whenever the  given inset changes. /// /// {@youtube 560 315 https://www.youtube.com/watch?v=PY2m0fhGNz4} /// /// Here's an illustration of what using this widget looks like, using a [curve] /// of [Curves.fastOutSlowIn]. /// {@animation 250 266 https://flutter.github.io/assets-for-api-docs/assets/widgets/animated_padding.mp4} /// /// See also: /// /// * [AnimatedContainer], which can transition more values at once. /// * [AnimatedAlign], which automatically transitions its child's /// position over a given duration whenever the given /// [AnimatedAlign.alignment] changes. AnimatedPadding({ Key key, @required this.padding, this.child, Curve curve = Curves.linear, @required Duration duration, VoidCallback onEnd, }) : assert(padding ! = null), assert(padding.isNonNegative), super(key: key, curve: curve, duration: duration, onEnd: onEnd);Copy the code

The modified code

/// Ignore the style
showModalBottomSheet(
  isScrollControlled: true./ /! important
  builder: (BuildContext context) {
    return AnimatedPadding(
      padding: MediaQuery.of(context).viewInsets, // We can use this to get the desired padding
      duration: const Duration(milliseconds: 100),
      child: Container(
        child: TextField(
              keyboardType: TextInputType.text,
              autofocus: true,))); }); An explanation of viewInsets/// The parts of the display that are completely obscured by system UI,
  /// typically by the device's keyboard.
  ///
  /// When a mobile device's keyboard is visible `viewInsets.bottom`
  /// corresponds to the top of the keyboard.
  ///
  /// This value is independent of the [padding] and [viewPadding]. viewPadding
  /// is measured from the edges of the [MediaQuery] widget's bounds. Padding is
  /// calculated based on the viewPadding and viewInsets. The bounds of the top
  /// level MediaQuery created by [WidgetsApp] are the same as the window
  /// (often the mobile device screen) that contains the app.
  ///
  /// See also:
  ///
  ///  * [ui.window], which provides some additional detail about this property
  ///    and how it relates to [padding] and [viewPadding].
Copy the code

Ok, this time to share here, like a thumbs-up oh