Skip to content

F
Front-End
Unverified Commit 0c4a659d authored by Tianguang's avatar Tianguang Committed by GitHub
Browse files
Options

Support New and Custom FAB Locations (#51465)

parent c5554cdf
Show whitespace changes
Inline Side-by-side
Showing with 805 additions and 136 deletions
packages/flutter/lib/src/material/floating_action_button_location.dart
View file @ 0c4a659d
......@@ -28,6 +28,30 @@ const Duration kFloatingActionButtonSegue = Duration(milliseconds: 200);
/// Its value corresponds to 0.125 of a full circle, equivalent to 45 degrees or pi/4 radians.
const double kFloatingActionButtonTurnInterval = 0.125;
/// If a [FloatingActionButton] is used on a [Scaffold] in certain positions,
/// it is moved [kMiniButtonOffsetAdjustment] pixels closer to the edge of the screen.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.leading] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// More specifically:
/// * In the following positions, the [FloatingActionButton] is moved *horizontally*
/// closer to the edge of the screen:
/// * [FloatingActionButtonLocation.miniStartTop]
/// * [FloatingActionButtonLocation.miniStartFloat]
/// * [FloatingActionButtonLocation.miniStartDocked]
/// * [FloatingActionButtonLocation.miniEndTop]
/// * [FloatingActionButtonLocation.miniEndFloat]
/// * [FloatingActionButtonLocation.miniEndDocked]
/// * In the following positions, the [FloatingActionButton] is moved *vertically*
/// closer to the bottom of the screen:
/// * [FloatingActionButtonLocation.miniStartFloat]
/// * [FloatingActionButtonLocation.miniCenterFloat]
/// * [FloatingActionButtonLocation.miniEndFloat]
const double kMiniButtonOffsetAdjustment = 4.0;
/// An object that defines a position for the [FloatingActionButton]
/// based on the [Scaffold]'s [ScaffoldPrelayoutGeometry].
///
......@@ -49,27 +73,165 @@ abstract class FloatingActionButtonLocation {
/// const constructors so that they can be used in const expressions.
const FloatingActionButtonLocation();
/// Start-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body].
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.leading] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniStartTop] and set [FloatingActionButton.mini] to true.
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation startTop = _StartTopFabLocation();
/// Start-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body], optimized for mini floating
/// action buttons.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.leading] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation miniStartTop = _MiniStartTopFabLocation();
/// Centered [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation centerTop = _CenterTopFabLocation();
/// Centered [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body], intended to be used with
/// [FloatingActionButton.mini] set to true.
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation miniCenterTop = _MiniCenterTopFabLocation();
/// End-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body].
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.trailing] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniEndTop] and set [FloatingActionButton.mini] to true.
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation endTop = _EndTopFabLocation();
/// End-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body], optimized for mini floating
/// action buttons.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.trailing] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation miniEndTop = _MiniEndTopFabLocation();
/// Start-aligned [FloatingActionButton], floating at the bottom of the screen.
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.leading] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniStartFloat] and set [FloatingActionButton.mini] to true.
static const FloatingActionButtonLocation startFloat = _StartFloatFabLocation();
/// Start-aligned [FloatingActionButton], floating at the bottom of the screen,
/// optimized for mini floating action buttons.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.leading] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// Compared to [FloatingActionButtonLocation.startFloat], floating action
/// buttons using this location will move horizontally _and_ vertically
/// closer to the edges, by [kMiniButtonOffsetAdjustment] each.
static const FloatingActionButtonLocation miniStartFloat = _MiniStartFloatFabLocation();
/// Centered [FloatingActionButton], floating at the bottom of the screen.
///
/// To position a mini floating action button, use [miniCenterFloat] and
/// set [FloatingActionButtonLocation.mini] to true.
static const FloatingActionButtonLocation centerFloat = _CenterFloatFabLocation();
/// Centered [FloatingActionButton], floating at the bottom of the screen,
/// optimized for mini floating action buttons.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align horizontally with
/// the locations [FloatingActionButtonLocation.miniStartFloat]
/// and [FloatingActionButtonLocation.miniEndFloat].
///
/// Compared to [FloatingActionButtonLocation.centerFloat], floating action
/// buttons using this location will move vertically down
/// by [kMiniButtonOffsetAdjustment].
static const FloatingActionButtonLocation miniCenterFloat = _MiniCenterFloatFabLocation();
/// End-aligned [FloatingActionButton], floating at the bottom of the screen.
///
/// This is the default alignment of [FloatingActionButton]s in Material applications.
static const FloatingActionButtonLocation endFloat = _EndFloatFloatingActionButtonLocation();
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.trailing] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniEndFloat] and set [FloatingActionButton.mini] to true.
static const FloatingActionButtonLocation endFloat = _EndFloatFabLocation();
/// Centered [FloatingActionButton], floating at the bottom of the screen.
static const FloatingActionButtonLocation centerFloat = _CenterFloatFloatingActionButtonLocation();
/// End-aligned [FloatingActionButton], floating at the bottom of the screen,
/// optimized for mini floating action buttons.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.trailing] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// Compared to [FloatingActionButtonLocation.endFloat], floating action
/// buttons using this location will move horizontally _and_ vertically
/// closer to the edges, by [kMiniButtonOffsetAdjustment] each.
static const FloatingActionButtonLocation miniEndFloat = _MiniEndFloatFabLocation();
/// End-aligned [FloatingActionButton], floating over the
/// Start-aligned [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar.
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.leading] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniStartDocked] and set [FloatingActionButton.mini] to true.
///
/// If the value of [Scaffold.bottomNavigationBar] is a [BottomAppBar],
/// the bottom app bar can include a "notch" in its shape that accommodates
/// the overlapping floating action button.
///
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation startDocked = _StartDockedFabLocation();
/// Start-aligned [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar,
/// optimized for mini floating action buttons.
///
/// If the value of [Scaffold.bottomNavigationBar] is a [BottomAppBar],
/// the bottom app bar can include a "notch" in its shape that accommodates
/// the overlapping floating action button.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.leading] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation endDocked = _EndDockedFloatingActionButtonLocation();
static const FloatingActionButtonLocation miniStartDocked = _MiniStartDockedFabLocation();
/// Center-aligned [FloatingActionButton], floating over the
/// Centered [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar.
///
......@@ -79,38 +241,54 @@ abstract class FloatingActionButtonLocation {
///
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation centerDocked = _CenterDockedFloatingActionButtonLocation();
static const FloatingActionButtonLocation centerDocked = _CenterDockedFabLocation();
/// Start-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body].
/// Centered [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar;
/// intended to be used with [FloatingActionButton.mini] set to true.
///
/// To align a floating action button with [FloatingActionButton.mini] set to
/// true with [CircleAvatar]s in the [ListTile.leading] slots of [ListTile]s
/// in a [ListView] in the [Scaffold.body], consider using [miniStartTop].
/// If the value of [Scaffold.bottomNavigationBar] is a [BottomAppBar],
/// the bottom app bar can include a "notch" in its shape that accommodates
/// the overlapping floating action button.
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation startTop = _StartTopFloatingActionButtonLocation();
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation miniCenterDocked = _MiniCenterDockedFabLocation();
/// Start-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body], optimized for mini floating
/// action buttons.
/// End-aligned [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar.
///
/// If the value of [Scaffold.bottomNavigationBar] is a [BottomAppBar],
/// the bottom app bar can include a "notch" in its shape that accommodates
/// the overlapping floating action button.
///
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation endDocked = _EndDockedFabLocation();
/// End-aligned [FloatingActionButton], floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar,
/// optimized for mini floating action buttons.
///
/// To align a floating action button with [CircleAvatar]s in the
/// [ListTile.trailing] slots of [ListTile]s in a [ListView] in the [Scaffold.body],
/// use [miniEndDocked] and set [FloatingActionButton.mini] to true.
///
/// If the value of [Scaffold.bottomNavigationBar] is a [BottomAppBar],
/// the bottom app bar can include a "notch" in its shape that accommodates
/// the overlapping floating action button.
///
/// This is intended to be used with [FloatingActionButton.mini] set to true,
/// so that the floating action button appears to align with [CircleAvatar]s
/// in the [ListTile.leading] slot of a [ListTile] in a [ListView] in the
/// in the [ListTile.trailing] slot of a [ListTile] in a [ListView] in the
/// [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation miniStartTop = _MiniStartTopFloatingActionButtonLocation();
/// End-aligned [FloatingActionButton], floating over the transition between
/// the [Scaffold.appBar] and the [Scaffold.body].
///
/// This is unlikely to be a useful location for apps that lack a top [AppBar]
/// or that use a [SliverAppBar] in the scaffold body itself.
static const FloatingActionButtonLocation endTop = _EndTopFloatingActionButtonLocation();
/// This is unlikely to be a useful location for apps that lack a bottom
/// navigation bar.
static const FloatingActionButtonLocation miniEndDocked = _MiniEndDockedFabLocation();
/// Places the [FloatingActionButton] based on the [Scaffold]'s layout.
///
......@@ -125,77 +303,132 @@ abstract class FloatingActionButtonLocation {
String toString() => objectRuntimeType(this, 'FloatingActionButtonLocation');
}
double _leftOffset(ScaffoldPrelayoutGeometry scaffoldGeometry, { double offset = 0.0 }) {
/// A base class that simplifies building [FloatingActionButtonLocation]s when
/// used with mixins [FabTopOffsetY], [FabFloatOffsetY], [FabDockedOffsetY],
/// [FabStartOffsetX], [FabCenterOffsetX], [FabEndOffsetX], and [FabMiniOffsetAdjustment].
///
/// A subclass of [FloatingActionButtonLocation] which implements its [getOffset] method
/// using three other methods: [getOffsetX], [getOffsetY], and [isMini].
///
/// Different mixins on this class override different methods, so that combining
/// a set of mixins creates a floating action button location.
///
/// For example: the location [FloatingActionButtonLocation.miniEndTop]
/// is based on a class that extends [StandardFabLocation]
/// with mixins [FabMiniOffsetAdjustment], [FabEndOffsetX], and [FabTopOffsetY].
///
/// You can create your own subclass of [StandardFabLocation]
/// to implement a custom [FloatingActionButtonLocation].
///
/// {@tool dartpad --template=stateless_widget_material}
///
/// This is an example of a user-defined [FloatingActionButtonLocation].
///
/// The example shows a [Scaffold] with an [AppBar], a [BottomAppBar], and a
/// [FloatingActionButton] using a custom [FloatingActionButtonLocation].
///
/// The new [FloatingActionButtonLocation] is defined
/// by extending [StandardFabLocation] with two mixins,
/// [FabEndOffsetX] and [FabFloatOffsetY], and overriding the
/// [getOffsetX] method to adjust the FAB's x-coordinate, creating a
/// [FloatingActionButtonLocation] slightly different from
/// [FloatingActionButtonLocation.endFloat].
///
/// ```dart preamble
/// class AlmostEndFloatFabLocation extends StandardFabLocation
/// with FabEndOffsetX, FabFloatOffsetY {
/// @override
/// double getOffsetX (ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
/// final double directionalAdjustment =
/// scaffoldGeometry.textDirection == TextDirection.ltr ? -50.0 : 50.0;
/// return super.getOffsetX(scaffoldGeometry, adjustment) + directionalAdjustment;
/// }
/// }
/// ```
///
/// ```dart
/// Widget build(BuildContext context) {
/// return Scaffold(
/// appBar: AppBar(
/// title: Text('Home page'),
/// ),
/// floatingActionButton: FloatingActionButton(
/// onPressed: () { print('FAB pressed.'); },
/// tooltip: 'Increment',
/// child: Icon(Icons.add),
/// ),
/// floatingActionButtonLocation: AlmostEndFloatFabLocation(),
/// );
/// }
/// ```
/// {@end-tool}
///
abstract class StandardFabLocation extends FloatingActionButtonLocation {
/// Abstract const constructor. This constructor enables subclasses to provide
/// const constructors so that they can be used in const expressions.
const StandardFabLocation();
/// Obtains the x-offset to place the [FloatingActionButton] based on the
/// [Scaffold]'s layout.
///
/// Used by [getOffset] to compute its x-coordinate.
double getOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment);
/// Obtains the y-offset to place the [FloatingActionButton] based on the
/// [Scaffold]'s layout.
///
/// Used by [getOffset] to compute its y-coordinate.
double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment);
/// A function returning whether this [StandardFabLocation] is optimized for
/// mini [FloatingActionButton]s.
bool isMini () => false;
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double adjustment = isMini() ? kMiniButtonOffsetAdjustment : 0.0;
return Offset(
getOffsetX(scaffoldGeometry, adjustment),
getOffsetY(scaffoldGeometry, adjustment),
);
}
/// Calculates x-offset for left-aligned [FloatingActionButtonLocation]s.
static double _leftOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
return kFloatingActionButtonMargin
+ scaffoldGeometry.minInsets.left
- offset;
}
- adjustment;
}
double _rightOffset(ScaffoldPrelayoutGeometry scaffoldGeometry, { double offset = 0.0 }) {
/// Calculates x-offset for right-aligned [FloatingActionButtonLocation]s.
static double _rightOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
return scaffoldGeometry.scaffoldSize.width
- kFloatingActionButtonMargin
- scaffoldGeometry.minInsets.right
- scaffoldGeometry.floatingActionButtonSize.width
+ offset;
}
double _endOffset(ScaffoldPrelayoutGeometry scaffoldGeometry, { double offset = 0.0 }) {
assert(scaffoldGeometry.textDirection != null);
switch (scaffoldGeometry.textDirection) {
case TextDirection.rtl:
return _leftOffset(scaffoldGeometry, offset: offset);
case TextDirection.ltr:
return _rightOffset(scaffoldGeometry, offset: offset);
+ adjustment;
}
return null;
}
double _startOffset(ScaffoldPrelayoutGeometry scaffoldGeometry, { double offset = 0.0 }) {
assert(scaffoldGeometry.textDirection != null);
switch (scaffoldGeometry.textDirection) {
case TextDirection.rtl:
return _rightOffset(scaffoldGeometry, offset: offset);
case TextDirection.ltr:
return _leftOffset(scaffoldGeometry, offset: offset);
}
return null;
}
class _CenterFloatFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CenterFloatFloatingActionButtonLocation();
}
/// Mixin for a "top" floating action button location, such as [FloatingActionButtonLocation.startTop].
mixin FabTopOffsetY on StandardFabLocation {
/// Calculates y-offset for [FloatingActionButtonLocation]s floating over
/// the transition between the [Scaffold.appBar] and the [Scaffold.body].
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
// Compute the x-axis offset.
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
// Compute the y-axis offset.
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight - kFloatingActionButtonMargin;
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
return Offset(fabX, fabY);
double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
final double fabHalfHeight = scaffoldGeometry.floatingActionButtonSize.height / 2.0;
return scaffoldGeometry.contentTop - fabHalfHeight;
}
@override
String toString() => 'FloatingActionButtonLocation.centerFloat';
}
class _EndFloatFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _EndFloatFloatingActionButtonLocation();
/// Mixin for a "float" floating action button location, such as [FloatingActionButtonLocation.centerFloat].
mixin FabFloatOffsetY on StandardFabLocation {
/// Calculates y-offset for [FloatingActionButtonLocation]s floating at
/// the bottom of the screen.
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
// Compute the x-axis offset.
final double fabX = _endOffset(scaffoldGeometry);
// Compute the y-axis offset.
double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
......@@ -207,22 +440,17 @@ class _EndFloatFloatingActionButtonLocation extends FloatingActionButtonLocation
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
return Offset(fabX, fabY);
return fabY + adjustment;
}
@override
String toString() => 'FloatingActionButtonLocation.endFloat';
}
// Provider of common logic for [FloatingActionButtonLocation]s that
// dock to the [BottomAppBar].
abstract class _DockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _DockedFloatingActionButtonLocation();
// Positions the Y coordinate of the [FloatingActionButton] at a height
// where it docks to the [BottomAppBar].
@protected
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
/// Mixin for a "docked" floating action button location, such as [FloatingActionButtonLocation.endDocked].
mixin FabDockedOffsetY on StandardFabLocation {
/// Calculates y-offset for [FloatingActionButtonLocation]s floating over the
/// [Scaffold.bottomNavigationBar] so that the center of the floating
/// action button lines up with the top of the bottom navigation bar.
@override
double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
......@@ -241,74 +469,195 @@ abstract class _DockedFloatingActionButtonLocation extends FloatingActionButtonL
}
}
class _EndDockedFloatingActionButtonLocation extends _DockedFloatingActionButtonLocation {
const _EndDockedFloatingActionButtonLocation();
/// Mixin for a "start" floating action button location, such as [FloatingActionButtonLocation.startTop].
mixin FabStartOffsetX on StandardFabLocation {
/// Calculates x-offset for start-aligned [FloatingActionButtonLocation]s.
@override
double getOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
assert(scaffoldGeometry.textDirection != null);
switch (scaffoldGeometry.textDirection) {
case TextDirection.rtl:
return StandardFabLocation._rightOffsetX(scaffoldGeometry, adjustment);
case TextDirection.ltr:
return StandardFabLocation._leftOffsetX(scaffoldGeometry, adjustment);
}
return null;
}
}
/// Mixin for a "center" floating action button location, such as [FloatingActionButtonLocation.centerFloat].
mixin FabCenterOffsetX on StandardFabLocation {
/// Calculates x-offset for center-aligned [FloatingActionButtonLocation]s.
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = _endOffset(scaffoldGeometry);
return Offset(fabX, getDockedY(scaffoldGeometry));
double getOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
return (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
}
}
/// Mixin for an "end" floating action button location, such as [FloatingActionButtonLocation.endDocked].
mixin FabEndOffsetX on StandardFabLocation {
/// Calculates x-offset for end-aligned [FloatingActionButtonLocation]s.
@override
String toString() => 'FloatingActionButtonLocation.endDocked';
double getOffsetX(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
assert(scaffoldGeometry.textDirection != null);
switch (scaffoldGeometry.textDirection) {
case TextDirection.rtl:
return StandardFabLocation._leftOffsetX(scaffoldGeometry, adjustment);
case TextDirection.ltr:
return StandardFabLocation._rightOffsetX(scaffoldGeometry, adjustment);
}
return null;
}
}
/// Mixin for a "mini" floating action button location, such as [FloatingActionButtonLocation.miniStartTop].
mixin FabMiniOffsetAdjustment on StandardFabLocation {
@override
bool isMini () => true;
}
class _CenterDockedFloatingActionButtonLocation extends _DockedFloatingActionButtonLocation {
const _CenterDockedFloatingActionButtonLocation();
class _StartTopFabLocation extends StandardFabLocation
with FabStartOffsetX, FabTopOffsetY {
const _StartTopFabLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
String toString() => 'FloatingActionButtonLocation.startTop';
}
class _MiniStartTopFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabStartOffsetX, FabTopOffsetY {
const _MiniStartTopFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.centerDocked';
String toString() => 'FloatingActionButtonLocation.miniStartTop';
}
double _straddleAppBar(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabHalfHeight = scaffoldGeometry.floatingActionButtonSize.height / 2.0;
return scaffoldGeometry.contentTop - fabHalfHeight;
class _CenterTopFabLocation extends StandardFabLocation
with FabCenterOffsetX, FabTopOffsetY {
const _CenterTopFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.centerTop';
}
class _StartTopFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _StartTopFloatingActionButtonLocation();
class _MiniCenterTopFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabCenterOffsetX, FabTopOffsetY {
const _MiniCenterTopFabLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
return Offset(_startOffset(scaffoldGeometry), _straddleAppBar(scaffoldGeometry));
}
String toString() => 'FloatingActionButtonLocation.miniCenterTop';
}
class _EndTopFabLocation extends StandardFabLocation
with FabEndOffsetX, FabTopOffsetY {
const _EndTopFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.startTop';
String toString() => 'FloatingActionButtonLocation.endTop';
}
class _MiniStartTopFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _MiniStartTopFloatingActionButtonLocation();
class _MiniEndTopFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabEndOffsetX, FabTopOffsetY {
const _MiniEndTopFabLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
// We have to offset the FAB by four pixels because the FAB itself _adds_
// four pixels in every direction in order to have a hit target area of 48
// pixels in each dimension, despite being a circle of radius 40.
return Offset(_startOffset(scaffoldGeometry, offset: 4.0), _straddleAppBar(scaffoldGeometry));
}
String toString() => 'FloatingActionButtonLocation.miniEndTop';
}
class _StartFloatFabLocation extends StandardFabLocation
with FabStartOffsetX, FabFloatOffsetY {
const _StartFloatFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniStartTop';
String toString() => 'FloatingActionButtonLocation.startFloat';
}
class _EndTopFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _EndTopFloatingActionButtonLocation();
class _MiniStartFloatFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabStartOffsetX, FabFloatOffsetY {
const _MiniStartFloatFabLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
return Offset(_endOffset(scaffoldGeometry), _straddleAppBar(scaffoldGeometry));
}
String toString() => 'FloatingActionButtonLocation.miniStartFloat';
}
class _CenterFloatFabLocation extends StandardFabLocation
with FabCenterOffsetX, FabFloatOffsetY {
const _CenterFloatFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.endTop';
String toString() => 'FloatingActionButtonLocation.centerFloat';
}
class _MiniCenterFloatFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabCenterOffsetX, FabFloatOffsetY {
const _MiniCenterFloatFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniCenterFloat';
}
class _EndFloatFabLocation extends StandardFabLocation
with FabEndOffsetX, FabFloatOffsetY {
const _EndFloatFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.endFloat';
}
class _MiniEndFloatFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabEndOffsetX, FabFloatOffsetY {
const _MiniEndFloatFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniEndFloat';
}
class _StartDockedFabLocation extends StandardFabLocation
with FabStartOffsetX, FabDockedOffsetY {
const _StartDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.startDocked';
}
class _MiniStartDockedFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabStartOffsetX, FabDockedOffsetY {
const _MiniStartDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniStartDocked';
}
class _CenterDockedFabLocation extends StandardFabLocation
with FabCenterOffsetX, FabDockedOffsetY {
const _CenterDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.centerDocked';
}
class _MiniCenterDockedFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabCenterOffsetX, FabDockedOffsetY {
const _MiniCenterDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniCenterDocked';
}
class _EndDockedFabLocation extends StandardFabLocation
with FabEndOffsetX, FabDockedOffsetY {
const _EndDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.endDocked';
}
class _MiniEndDockedFabLocation extends StandardFabLocation
with FabMiniOffsetAdjustment, FabEndOffsetX, FabDockedOffsetY {
const _MiniEndDockedFabLocation();
@override
String toString() => 'FloatingActionButtonLocation.miniEndDocked';
}
/// Provider of animations to move the [FloatingActionButton] between [FloatingActionButtonLocation]s.
......
packages/flutter/test/material/floating_action_button_location_test.dart
View file @ 0c4a659d
......@@ -373,6 +373,240 @@ void main() {
);
expect(tester.getRect(find.byType(FloatingActionButton)), rectMoreOrLessEquals(const Rect.fromLTWH(800.0 - 56.0 - 16.0, 28.0, 56.0, 56.0)));
});
group('New Floating Action Button Locations', () {
testWidgets('startTop', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _topOffsetY));
});
testWidgets('centerTop', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _topOffsetY));
});
testWidgets('endTop', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.endTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX, _topOffsetY));
});
testWidgets('startFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _floatOffsetY));
});
testWidgets('centerFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _floatOffsetY));
});
testWidgets('endFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.endFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX, _floatOffsetY));
});
testWidgets('startDocked', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _dockedOffsetY));
});
testWidgets('centerDocked', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _dockedOffsetY));
});
testWidgets('endDocked', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.endDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX, _dockedOffsetY));
});
testWidgets('miniStartTop', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniStartTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniLeftOffsetX, _topOffsetY));
});
testWidgets('miniEndTop', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniEndTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniRightOffsetX, _topOffsetY));
});
testWidgets('miniStartFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniStartFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniLeftOffsetX, _miniFloatOffsetY));
});
testWidgets('miniCenterFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniCenterFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _miniFloatOffsetY));
});
testWidgets('miniEndFloat', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniEndFloat));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniRightOffsetX, _miniFloatOffsetY));
});
testWidgets('miniStartDocked', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniStartDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniLeftOffsetX, _dockedOffsetY));
});
testWidgets('miniEndDocked', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniEndDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniRightOffsetX, _dockedOffsetY));
});
// Test a few RTL cases.
testWidgets('endTop, RTL', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.endTop, textDirection: TextDirection.rtl));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _topOffsetY));
});
testWidgets('miniStartFloat, RTL', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.miniStartFloat, textDirection: TextDirection.rtl));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_miniRightOffsetX, _miniFloatOffsetY));
});
});
group('Custom Floating Action Button Locations', () {
testWidgets('Almost end float', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(_AlmostEndFloatFabLocation()));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX - 50, _floatOffsetY));
});
testWidgets('Almost end float, RTL', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(_AlmostEndFloatFabLocation(), textDirection: TextDirection.rtl));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX + 50, _floatOffsetY));
});
testWidgets('Quarter end top', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(_QuarterEndTopFabLocation()));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX * 0.75 + _leftOffsetX * 0.25, _topOffsetY));
});
testWidgets('Quarter end top, RTL', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(_QuarterEndTopFabLocation(), textDirection: TextDirection.rtl));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX * 0.75 + _rightOffsetX * 0.25, _topOffsetY));
});
});
group('Moves involving new locations', () {
testWidgets('Moves between new locations and new locations', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerTop));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _topOffsetY));
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startFloat));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pumpAndSettle();
expect(tester.binding.transientCallbackCount, 0);
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _floatOffsetY));
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startDocked));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pumpAndSettle();
expect(tester.binding.transientCallbackCount, 0);
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _dockedOffsetY));
});
testWidgets('Moves between new locations and old locations', (WidgetTester tester) async {
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.endDocked));
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_rightOffsetX, _dockedOffsetY));
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.startDocked));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pumpAndSettle();
expect(tester.binding.transientCallbackCount, 0);
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_leftOffsetX, _dockedOffsetY));
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerFloat));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pumpAndSettle();
expect(tester.binding.transientCallbackCount, 0);
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _floatOffsetY));
await tester.pumpWidget(_singleFabScaffold(FloatingActionButtonLocation.centerTop));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pumpAndSettle();
expect(tester.binding.transientCallbackCount, 0);
expect(tester.getCenter(find.byType(FloatingActionButton)), const Offset(_centerOffsetX, _topOffsetY));
});
testWidgets('Moves between new locations and old locations with custom animator', (WidgetTester tester) async {
final FloatingActionButtonAnimator animator = _LinearMovementFabAnimator();
const Offset begin = Offset(_centerOffsetX, _topOffsetY);
const Offset end = Offset(_rightOffsetX - 50, _floatOffsetY);
final Duration animationDuration = kFloatingActionButtonSegue * 2;
await tester.pumpWidget(_singleFabScaffold(
FloatingActionButtonLocation.centerTop,
animator: animator,
));
expect(find.byType(FloatingActionButton), findsOneWidget);
expect(tester.binding.transientCallbackCount, 0);
await tester.pumpWidget(_singleFabScaffold(
_AlmostEndFloatFabLocation(),
animator: animator,
));
expect(tester.binding.transientCallbackCount, greaterThan(0));
await tester.pump(animationDuration * 0.25);
expect(tester.getCenter(find.byType(FloatingActionButton)), offsetMoreOrLessEquals(begin * 0.75 + end * 0.25));
await tester.pump(animationDuration * 0.25);
expect(tester.getCenter(find.byType(FloatingActionButton)), offsetMoreOrLessEquals(begin * 0.5 + end * 0.5));
await tester.pump(animationDuration * 0.25);
expect(tester.getCenter(find.byType(FloatingActionButton)), offsetMoreOrLessEquals(begin * 0.25 + end * 0.75));
await tester.pumpAndSettle();
expect(tester.getCenter(find.byType(FloatingActionButton)), end);
expect(tester.binding.transientCallbackCount, 0);
});
});
}
......@@ -413,6 +647,55 @@ class _GeometryListenerState extends State<_GeometryListener> {
}
}
const double _leftOffsetX = 44.0;
const double _centerOffsetX = 400.0;
const double _rightOffsetX = 756.0;
const double _miniLeftOffsetX = _leftOffsetX - kMiniButtonOffsetAdjustment;
const double _miniRightOffsetX = _rightOffsetX + kMiniButtonOffsetAdjustment;
const double _topOffsetY = 56.0;
const double _floatOffsetY = 500.0;
const double _dockedOffsetY = 544.0;
const double _miniFloatOffsetY = _floatOffsetY + kMiniButtonOffsetAdjustment;
Widget _singleFabScaffold(
FloatingActionButtonLocation location,
{
FloatingActionButtonAnimator animator,
bool mini = false,
TextDirection textDirection = TextDirection.ltr,
}
) {
return MaterialApp(
home: Directionality(
textDirection: textDirection,
child: Scaffold(
appBar: AppBar(
title: const Text('FloatingActionButtonLocation Test.'),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.beach_access),
mini: mini,
),
floatingActionButtonLocation: location,
floatingActionButtonAnimator: animator,
),
),
);
}
// The Scaffold.geometryOf() value is only available at paint time.
// To fetch it for the tests we implement this CustomPainter that just
......@@ -487,3 +770,40 @@ class _StartTopFloatingActionButtonLocation extends FloatingActionButtonLocation
return Offset(fabX, fabY);
}
}
class _AlmostEndFloatFabLocation extends StandardFabLocation
with FabEndOffsetX, FabFloatOffsetY {
@override
double getOffsetX (ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
final double directionalAdjustment =
scaffoldGeometry.textDirection == TextDirection.ltr ? -50.0 : 50.0;
return super.getOffsetX(scaffoldGeometry, adjustment) + directionalAdjustment;
}
}
class _QuarterEndTopFabLocation extends StandardFabLocation
with FabEndOffsetX, FabTopOffsetY {
@override
double getOffsetX (ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
return super.getOffsetX(scaffoldGeometry, adjustment) * 0.75
+ (FloatingActionButtonLocation.startFloat as StandardFabLocation)
.getOffsetX(scaffoldGeometry, adjustment) * 0.25;
}
}
class _LinearMovementFabAnimator extends FloatingActionButtonAnimator {
@override
Offset getOffset({@required Offset begin, @required Offset end, @required double progress}) {
return Offset.lerp(begin, end, progress);
}
@override
Animation<double> getScaleAnimation({@required Animation<double> parent}) {
return const AlwaysStoppedAnimation<double>(1.0);
}
@override
Animation<double> getRotationAnimation({@required Animation<double> parent}) {
return const AlwaysStoppedAnimation<double>(1.0);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab