Floating action button moves up when used with keyboard input

[stijnie2210]

First of all, I'm very grateful for this code to exist! But since i've been using it i've been coming across a couple layout bugs.

The first one is, when i'm using the code from the example there seems to be two FABs, and one seems to be lower than the other the first time the app boots up.

again, this is with the exact code from the repo, besides some text and theme changes ofcourse.

The second problem is when you tap on a text field and the keyboard pops up, the FAB moves up as well, and stays there even when you close the keyboard, as seen in the screenshots below. Maybe I'm doing something wrong here, but I'd appreciate some feedback.

Thank you very much in advance!

[vvasc]

to correct that, you could make a new class of FixedCenterDockedFabLocation extends FloatingActionButtonLocation and pass the context to it.

it's something like:

import 'dart:math';

import 'package:flutter/material.dart';

class FixedCenterDockedFabLocation extends FloatingActionButtonLocation {
  const FixedCenterDockedFabLocation({
    this.context,
  });
  final context;

  @protected
  double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double contentBottom = scaffoldGeometry.contentBottom;
    final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
    final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
    final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
    double bottomDistance = MediaQuery.of(context).viewInsets.bottom;

    double fabY = contentBottom + bottomDistance - fabHeight / 2.0;

    // The FAB should sit with a margin between it and the snack bar.
    if (snackBarHeight > 0.0)
      fabY = min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
    // The FAB should sit with its center in front of the top of the bottom sheet.
    if (bottomSheetHeight > 0.0)
      fabY = min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);

    final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
    return min(maxFabY, fabY);
  }
  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
    return Offset(fabX, getDockedY(scaffoldGeometry));
  }
}

[aytunch]

@vvasc Thanks for this solution, I implemented it and now the FAB does not go up along with the keyboard. However the FAB makes a scale down to 0pixels and back up to its original size animation when the textfield is on focus. You can see it behind the keyboard in iOS simulator with a semi transparent keyboard.

Also, in my case, when i change through tabs of my bottomnavbar the same thing happens. Is this something about passing the context? Could you be so kind and check this issue?

[vvasc]

This happens with me too, unfortunately I don't know what causes that. But I've another approach which consist in apply a new fabLocation only when the keyboard appear.

static _dockedFabLocation(context) {
    if (MediaQuery.of(context).viewInsets.bottom != 0) {
      return FixedCenterDockedFabLocation(bottomDistance: MediaQuery.of(context).viewInsets.bottom);
    } else {
      return FloatingActionButtonLocation.centerDocked;
    }
  }

And FixedCenterDockedFabLocation still is the class above.
In this case I send the position of bottom distance instead of send context and the fab continues to make an animation when keyboard appear, however when I change tabs the FAB don't animate.

I know this one does not the best solution because the problem with animation FAB, although, this is the only solution I found to use an AppBar with a center FAB.

[srineesh]

how to navigate between other pages, when clicked items in the bottom bar without setting up a default index.
Thank you in advance.

[aarajput]

@vvasc Thanks for this solution, I implemented it and now the FAB does not go up along with the keyboard. However the FAB makes a scale down to 0pixels and back up to its original size animation when the textfield is on focus. You can see it behind the keyboard in iOS simulator with a semi transparent keyboard.

Also, in my case, when i change through tabs of my bottomnavbar the same thing happens. Is this something about passing the context? Could you be so kind and check this issue?

Code from #2 (comment) needs to be fixed in order to fix animation issue.

1. Make FixedCenterDockedFabLocation const and dont pass context in it. I am asking you to this because animation on fab happens if FixedCenterDockedFabLocation rebuilds. const keyword will avoid that.
2. Instead of double bottomDistance = MediaQuery.of(context).viewInsets.bottom;, use double bottomDistance = WidgetsBinding.instance.window.viewInsets.bottom

[sils]

For future reference, this is an implementation following this idea minus a few quirks, with less lines of code and using more upstream code, i.e. hopefully better to maintain:

class FixedCenterDockedFabLocation extends StandardFabLocation
    with FabCenterOffsetX, FabDockedOffsetY {
  const FixedCenterDockedFabLocation();

  @override
  String toString() => 'FloatingActionButtonLocation.fixedCenterDocked';

  @override
  double getOffsetY(
      ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    final double bottomMinInset = scaffoldGeometry.minInsets.bottom;
    if (bottomMinInset > 0) {
      // Hide if there's a keyboard
      return 0;
    }
    return super.getOffsetY(scaffoldGeometry, adjustment);
  }
}

Feel free to use this code without limitations or attribution.

Also note that when using this, use it with const.

[JamiuJimoh]

For future reference, this is an implementation following this idea minus a few quirks, with less lines of code and using more upstream code, i.e. hopefully better to maintain:

class FixedCenterDockedFabLocation extends StandardFabLocation
    with FabCenterOffsetX, FabDockedOffsetY {
  const FixedCenterDockedFabLocation();

  @override
  String toString() => 'FloatingActionButtonLocation.fixedCenterDocked';

  @override
  double getOffsetY(
      ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    final double bottomMinInset = scaffoldGeometry.minInsets.bottom;
    if (bottomMinInset > 0) {
      // Hide if there's a keyboard
      return 0;
    }
    return super.getOffsetY(scaffoldGeometry, adjustment);
  }
}

Feel free to use this code without limitations or attribution.

Also note that when using this, use it with const.

This works but the fab gets pushed to the top of the screen and still visible. A work around I used was to "return -100". This way, it gets pushed off the screen.