Floating action button moves up when used with keyboard input about bottom_bar_fab_flutter HOT 7 CLOSED

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));
  }
}

from bottom_bar_fab_flutter.

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.

from bottom_bar_fab_flutter.

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.

from bottom_bar_fab_flutter.

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.

from bottom_bar_fab_flutter.

@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?

from bottom_bar_fab_flutter.

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

from bottom_bar_fab_flutter.

@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

from bottom_bar_fab_flutter.