Comments (7)
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.
@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.
- Make
FixedCenterDockedFabLocation
const and dont pass context in it. I am asking you to this because animation on fab happens ifFixedCenterDockedFabLocation
rebuilds. const keyword will avoid that. - Instead of
double bottomDistance = MediaQuery.of(context).viewInsets.bottom;
, usedouble bottomDistance = WidgetsBinding.instance.window.viewInsets.bottom
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.
Related Issues (13)
- Is compatible with dart2 ? ??
- How to navigate between different pages? HOT 1
- can we hanged out floating action button above buttom appbar
- FloatingActionButton backgroud color not changed.
- Not beginner friendly
- ents
- notchedshape isn't defined HOT 2
- Multiple FAB buttons showing HOT 1
- Floating action button icon HOT 1
- FAB not Disappearing when Navigator.push to other scaffold widget HOT 2
- Floating Action Button, overlapping any screen or dialogue HOT 3
- How to set default index? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bottom_bar_fab_flutter.