Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add alignment to flushbar to support smaller flushbar on big screens #73

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add alignment to flushbar to support smaller flushbar on big screens #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
813bb91
Add alignment to flushbar to support smaller flushbar on big screens
Jun 1, 2022
e7d3189
Add alignment to flushbar to support smaller flushbar on big screens
Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ icon | You can use any widget here, but I recommend [Icon] or [Image] as indicat
shouldIconPulse | An option to animate the icon (if present). Defaults to true.
maxWidth | Used to limit Flushbar width (usually on large screens)
margin | Adds a custom margin to Flushbar
alignment | Align the Flushbar on big screens
padding | Adds a custom padding to Flushbar. The default follows material design guide line
borderRadius | Adds a radius to specified corners of Flushbar. Best combined with [margin]. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor]
textDirection | [TextDirection.ltr] by default. [Directionality.of(context)] to know whether it would be [TextDirection.ltr] or [TextDirection.rtl]
Expand Down
200 changes: 105 additions & 95 deletions lib/flushbar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,54 +15,55 @@ typedef OnTap = void Function(Flushbar flushbar);
/// A highly customizable widget so you can notify your user when you fell like he needs a beautiful explanation.
// ignore: must_be_immutable
class Flushbar<T> extends StatefulWidget {
Flushbar(
{Key? key,
this.title,
this.titleColor,
this.titleSize,
this.message,
this.messageSize,
this.messageColor,
this.titleText,
this.messageText,
this.icon,
this.shouldIconPulse = true,
this.maxWidth,
this.margin = const EdgeInsets.all(0.0),
this.padding = const EdgeInsets.all(16),
this.borderRadius,
this.textDirection = TextDirection.ltr,
this.borderColor,
this.borderWidth = 1.0,
this.backgroundColor = const Color(0xFF303030),
this.leftBarIndicatorColor,
this.boxShadows,
this.backgroundGradient,
this.mainButton,
this.onTap,
this.duration,
this.isDismissible = true,
this.dismissDirection = FlushbarDismissDirection.VERTICAL,
this.showProgressIndicator = false,
this.progressIndicatorController,
this.progressIndicatorBackgroundColor,
this.progressIndicatorValueColor,
this.flushbarPosition = FlushbarPosition.BOTTOM,
this.positionOffset = 0.0,
this.flushbarStyle = FlushbarStyle.FLOATING,
this.forwardAnimationCurve = Curves.easeOutCirc,
this.reverseAnimationCurve = Curves.easeOutCirc,
this.animationDuration = const Duration(seconds: 1),
FlushbarStatusCallback? onStatusChanged,
this.barBlur = 0.0,
this.blockBackgroundInteraction = false,
this.routeBlur,
this.routeColor,
this.userInputForm,
this.endOffset,
this.flushbarRoute // Please dont init this
})
// ignore: prefer_initializing_formals
Flushbar({
Key? key,
this.title,
this.titleColor,
this.titleSize,
this.message,
this.messageSize,
this.messageColor,
this.titleText,
this.messageText,
this.icon,
this.shouldIconPulse = true,
this.maxWidth,
this.margin = const EdgeInsets.all(0.0),
this.padding = const EdgeInsets.all(16),
this.borderRadius,
this.textDirection = TextDirection.ltr,
this.borderColor,
this.borderWidth = 1.0,
this.backgroundColor = const Color(0xFF303030),
this.leftBarIndicatorColor,
this.boxShadows,
this.backgroundGradient,
this.mainButton,
this.onTap,
this.duration,
this.isDismissible = true,
this.dismissDirection = FlushbarDismissDirection.VERTICAL,
this.showProgressIndicator = false,
this.progressIndicatorController,
this.progressIndicatorBackgroundColor,
this.progressIndicatorValueColor,
this.flushbarPosition = FlushbarPosition.BOTTOM,
this.positionOffset = 0.0,
this.flushbarStyle = FlushbarStyle.FLOATING,
this.forwardAnimationCurve = Curves.easeOutCirc,
this.reverseAnimationCurve = Curves.easeOutCirc,
this.animationDuration = const Duration(seconds: 1),
FlushbarStatusCallback? onStatusChanged,
this.barBlur = 0.0,
this.blockBackgroundInteraction = false,
this.routeBlur,
this.routeColor,
this.userInputForm,
this.endOffset,
this.flushbarRoute, // Please dont init this
this.alignment = Alignment.center,
})
// ignore: prefer_initializing_formals
: onStatusChanged = onStatusChanged,
super(key: key) {
onStatusChanged = onStatusChanged ?? (status) {};
Expand Down Expand Up @@ -221,6 +222,9 @@ class Flushbar<T> extends StatefulWidget {
/// Intended to replace [margin] when you need items below Flushbar to be accessible
final Offset? endOffset;

/// Alignment allows you for small Flushabr be better positioned on big screens
final Alignment alignment;

route.FlushbarRoute<T?>? flushbarRoute;

/// Show the flushbar. Kicks in [FlushbarStatus.IS_APPEARING] state followed by [FlushbarStatus.SHOWING]
Expand Down Expand Up @@ -316,10 +320,10 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
_boxHeightCompleter = Completer<Size>();

assert(
widget.userInputForm != null ||
((widget.message != null && widget.message!.isNotEmpty) ||
widget.messageText != null),
'A message is mandatory if you are not using userInputForm. Set either a message or messageText');
widget.userInputForm != null ||
((widget.message != null && widget.message!.isNotEmpty) ||
widget.messageText != null),
'A message is mandatory if you are not using userInputForm. Set either a message or messageText');

_isTitlePresent = (widget.title != null || widget.titleText != null);
_messageTopMargin = _isTitlePresent ? 6.0 : widget.padding.top;
Expand Down Expand Up @@ -347,8 +351,8 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
}

void _configureLeftBarFuture() {
SchedulerBinding.instance.addPostFrameCallback(
(_) {
SchedulerBinding.instance?.addPostFrameCallback(
(_) {
final keyContext = _backgroundBoxKey!.currentContext;

if (keyContext != null) {
Expand Down Expand Up @@ -394,16 +398,22 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
Widget build(BuildContext context) {
return Align(
heightFactor: 1.0,
alignment: widget.alignment,
child: Material(
color: widget.flushbarStyle == FlushbarStyle.FLOATING
? Colors.transparent
: widget.backgroundColor,
child: SafeArea(
minimum: widget.flushbarPosition == FlushbarPosition.BOTTOM
? EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom + widget.positionOffset)
: EdgeInsets.only(
top: MediaQuery.of(context).viewInsets.top + widget.positionOffset),
? EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom)
: EdgeInsets.only(top: MediaQuery.of(context).viewInsets.top),
// ? EdgeInsets.only(
// bottom: (MediaQuery.of(context).padding.bottom +
// widget.positionOffset))
// : EdgeInsets.only(
// top: (MediaQuery.of(context).padding.top) +
// widget.positionOffset),
bottom: widget.flushbarPosition == FlushbarPosition.BOTTOM,
top: widget.flushbarPosition == FlushbarPosition.TOP,
left: false,
Expand Down Expand Up @@ -559,13 +569,13 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
children: <Widget>[
(_isTitlePresent)
? Padding(
padding: EdgeInsets.only(
top: widget.padding.top,
left: widget.padding.left,
right: widget.padding.right,
),
child: _getTitleText(),
)
padding: EdgeInsets.only(
top: widget.padding.top,
left: widget.padding.left,
right: widget.padding.right,
),
child: _getTitleText(),
)
: _emptyWidget,
Padding(
padding: EdgeInsets.only(
Expand Down Expand Up @@ -595,13 +605,13 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
children: <Widget>[
(_isTitlePresent)
? Padding(
padding: EdgeInsets.only(
top: widget.padding.top,
left: 4.0,
right: widget.padding.left,
),
child: _getTitleText(),
)
padding: EdgeInsets.only(
top: widget.padding.top,
left: 4.0,
right: widget.padding.left,
),
child: _getTitleText(),
)
: _emptyWidget,
Padding(
padding: EdgeInsets.only(
Expand All @@ -627,13 +637,13 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
children: <Widget>[
(_isTitlePresent)
? Padding(
padding: EdgeInsets.only(
top: widget.padding.top,
left: widget.padding.left,
right: widget.padding.right,
),
child: _getTitleText(),
)
padding: EdgeInsets.only(
top: widget.padding.top,
left: widget.padding.left,
right: widget.padding.right,
),
child: _getTitleText(),
)
: _emptyWidget,
Padding(
padding: EdgeInsets.only(
Expand Down Expand Up @@ -667,13 +677,13 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
children: <Widget>[
(_isTitlePresent)
? Padding(
padding: EdgeInsets.only(
top: widget.padding.top,
left: 4.0,
right: 8.0,
),
child: _getTitleText(),
)
padding: EdgeInsets.only(
top: widget.padding.top,
left: 4.0,
right: 8.0,
),
child: _getTitleText(),
)
: _emptyWidget,
Padding(
padding: EdgeInsets.only(
Expand All @@ -689,9 +699,9 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
),
_getMainActionButton() != null
? Padding(
padding: EdgeInsets.only(right: buttonRightPadding),
child: _getMainActionButton(),
)
padding: EdgeInsets.only(right: buttonRightPadding),
child: _getMainActionButton(),
)
: _emptyWidget,
];
}
Expand All @@ -710,12 +720,12 @@ class _FlushbarState<K extends Object?> extends State<Flushbar<K>>
borderRadius: widget.borderRadius == null
? null
: widget.textDirection == TextDirection.ltr
? BorderRadius.only(
topLeft: widget.borderRadius!.topLeft,
bottomLeft: widget.borderRadius!.bottomLeft)
: BorderRadius.only(
topRight: widget.borderRadius!.topRight,
bottomRight: widget.borderRadius!.bottomRight),
? BorderRadius.only(
topLeft: widget.borderRadius!.topLeft,
bottomLeft: widget.borderRadius!.bottomLeft)
: BorderRadius.only(
topRight: widget.borderRadius!.topRight,
bottomRight: widget.borderRadius!.bottomRight),
color: widget.leftBarIndicatorColor,
),
);
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: another_flushbar
description: A flexible widget for user notification. Customize your text, button, duration, animations and much more. For Android devs, it is made to replace Snackbars and Toasts.
version: 1.10.29
version: 1.10.30
homepage: https://github.com/cmdrootaccess/another-flushbar

environment:
Expand Down