How to add a margin or padding to a Snackbar? - flutter

Question

I have been working on the Snackbar and achieved in my project successfully. However, there is this little thing which I want to add to Snackbar and that is the margins. I have seen in this link : Snackbars - Material Design
I really want my Snackbar to come like this :
What I'm getting is this now :
My code is :
final snackBar = SnackBar(
content: Text("Feild(s) are empty!"),
duration: new Duration(seconds: 1),
backgroundColor: Theme.of(context).primaryColor,
);
Scaffold.of(context).showSnackBar(snackBar);
}

Answer 1

Flutter team have updated the snackbar to match the material design in this PR. You can simply get the new behavior by setting
behavior: SnackBarBehavior.floating
Here is a sample code
final snackBar = SnackBar(
elevation: 6.0,
backgroundColor: Configs.current.COLORS_PRIMARY,
behavior: SnackBarBehavior.floating,
content: Text(
"Snack bar test",
style: TextStyle(color: Colors.white),
),
);
and the result will look like this

Answer 2

Not sure about margins. Round corner SnackBar can be created like:
Scaffold
.of(context)
.showSnackBar(
SnackBar(
content: Text(message),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)))));
Use required border radius in above.
Update:
You can use floating SnackBar to add default margins. Pass below to SnackBar constructor:
Scaffold
.of(context)
.showSnackBar(
SnackBar(
content: Text(message),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)))));

Answer 3

Screenshot:
Minimal code:
var snackbar = SnackBar(
content: Text('Hello World!'),
margin: EdgeInsets.all(20),
behavior: SnackBarBehavior.floating,
);
Scaffold.of(context).showSnackBar(snackbar);
Full code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Builder(builder: (context) {
return RaisedButton(
onPressed: () {
var snackbar = SnackBar(
content: Text('Hello World!'),
margin: EdgeInsets.all(20),
behavior: SnackBarBehavior.floating,
);
Scaffold.of(context).showSnackBar(snackbar);
},
child: Text('Show SnackBar'),
);
}),
),
);
}

Answer 4

Disclaimer: This answer is outdated and should only be viewed for historical reasons. Choose an appropriate solution from above 👀
Sadly I haven't found any options or possibilities, given by Flutter, to implement a round SnackBar.
If you really need/want the rounded corners and spacing you can copy the source code of the SnackBar and make your adjustments to the copy. Remember to add implements SnackBar to your class definition.
I've started the implementation and added the rounded corners. You'll just have to add the bottom padding for Phones like the iPhone X, which have elements at the bottom, obscuring the view. (To get the bottom spacing you can use MediaQuery.of(context).viewInsets.bottom.)
Standalone example you can copy:
main.dart
import 'package:flutter/material.dart';
import 'package:your_app_name/my_snack.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyBody()
),
);
}
}
class MyBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(onPressed: () {
Scaffold.of(context).showSnackBar(MySnack(content: Text('MySnack!')));
}),
);
}
}
my_snack.dart
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
const double _kSnackBarPadding = 24.0;
const double _kSingleLineVerticalPadding = 14.0;
const Color _kSnackBackground = Color(0xFF323232);
// TODO(ianh): We should check if the given text and actions are going to fit on
// one line or not, and if they are, use the single-line layout, and if not, use
// the multiline layout. See link above.
// TODO(ianh): Implement the Tablet version of snackbar if we're "on a tablet".
const Duration _kSnackBarTransitionDuration = Duration(milliseconds: 250);
const Duration _kSnackBarDisplayDuration = Duration(milliseconds: 4000);
const Curve _snackBarHeightCurve = Curves.fastOutSlowIn;
const Curve _snackBarFadeCurve = Interval(0.72, 1.0, curve: Curves.fastOutSlowIn);
/// Specify how a [SnackBar] was closed.
///
/// The [ScaffoldState.showSnackBar] function returns a
/// [ScaffoldFeatureController]. The value of the controller's closed property
/// is a Future that resolves to a SnackBarClosedReason. Applications that need
/// to know how a snackbar was closed can use this value.
///
/// Example:
///
/// ```dart
/// Scaffold.of(context).showSnackBar(
/// SnackBar( ... )
/// ).closed.then((SnackBarClosedReason reason) {
/// ...
/// });
/// ```
/// A button for a [SnackBar], known as an "action".
///
/// Snack bar actions are always enabled. If you want to disable a snack bar
/// action, simply don't include it in the snack bar.
///
/// Snack bar actions can only be pressed once. Subsequent presses are ignored.
///
/// See also:
///
/// * [SnackBar]
/// * <https://material.io/design/components/snackbars.html>
class _SnackBarActionState extends State<SnackBarAction> {
bool _haveTriggeredAction = false;
void _handlePressed() {
if (_haveTriggeredAction)
return;
setState(() {
_haveTriggeredAction = true;
});
widget.onPressed();
Scaffold.of(context).hideCurrentSnackBar(reason: SnackBarClosedReason.action);
}
#override
Widget build(BuildContext context) {
return FlatButton(
onPressed: _haveTriggeredAction ? null : _handlePressed,
child: Text(widget.label),
textColor: widget.textColor,
disabledTextColor: widget.disabledTextColor,
);
}
}
/// A lightweight message with an optional action which briefly displays at the
/// bottom of the screen.
///
/// To display a snack bar, call `Scaffold.of(context).showSnackBar()`, passing
/// an instance of [SnackBar] that describes the message.
///
/// To control how long the [SnackBar] remains visible, specify a [duration].
///
/// A SnackBar with an action will not time out when TalkBack or VoiceOver are
/// enabled. This is controlled by [AccessibilityFeatures.accessibleNavigation].
///
/// See also:
///
/// * [Scaffold.of], to obtain the current [ScaffoldState], which manages the
/// display and animation of snack bars.
/// * [ScaffoldState.showSnackBar], which displays a [SnackBar].
/// * [ScaffoldState.removeCurrentSnackBar], which abruptly hides the currently
/// displayed snack bar, if any, and allows the next to be displayed.
/// * [SnackBarAction], which is used to specify an [action] button to show
/// on the snack bar.
/// * <https://material.io/design/components/snackbars.html>
class MySnack extends StatelessWidget implements SnackBar {
/// Creates a snack bar.
///
/// The [content] argument must be non-null.
const MySnack({
Key key,
#required this.content,
this.backgroundColor,
this.action,
this.duration = _kSnackBarDisplayDuration,
this.animation,
}) : assert(content != null),
assert(duration != null),
super(key: key);
/// The primary content of the snack bar.
///
/// Typically a [Text] widget.
final Widget content;
/// The Snackbar's background color. By default the color is dark grey.
final Color backgroundColor;
/// (optional) An action that the user can take based on the snack bar.
///
/// For example, the snack bar might let the user undo the operation that
/// prompted the snackbar. Snack bars can have at most one action.
///
/// The action should not be "dismiss" or "cancel".
final SnackBarAction action;
/// The amount of time the snack bar should be displayed.
///
/// Defaults to 4.0s.
///
/// See also:
///
/// * [ScaffoldState.removeCurrentSnackBar], which abruptly hides the
/// currently displayed snack bar, if any, and allows the next to be
/// displayed.
/// * <https://material.io/design/components/snackbars.html>
final Duration duration;
/// The animation driving the entrance and exit of the snack bar.
final Animation<double> animation;
#override
Widget build(BuildContext context) {
final MediaQueryData mediaQueryData = MediaQuery.of(context);
assert(animation != null);
final ThemeData theme = Theme.of(context);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
accentColor: theme.accentColor,
accentColorBrightness: theme.accentColorBrightness,
);
final List<Widget> children = <Widget>[
const SizedBox(width: _kSnackBarPadding),
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: _kSingleLineVerticalPadding),
child: DefaultTextStyle(
style: darkTheme.textTheme.subhead,
child: content,
),
),
),
];
if (action != null) {
children.add(ButtonTheme.bar(
padding: const EdgeInsets.symmetric(horizontal: _kSnackBarPadding),
textTheme: ButtonTextTheme.accent,
child: action,
));
} else {
children.add(const SizedBox(width: _kSnackBarPadding));
}
final CurvedAnimation heightAnimation = CurvedAnimation(parent: animation, curve: _snackBarHeightCurve);
final CurvedAnimation fadeAnimation = CurvedAnimation(parent: animation, curve: _snackBarFadeCurve, reverseCurve: const Threshold(0.0));
Widget snackbar = SafeArea(
bottom: false,
top: false,
child: Row(
children: children,
crossAxisAlignment: CrossAxisAlignment.center,
),
);
snackbar = Semantics(
container: true,
liveRegion: true,
onDismiss: () {
Scaffold.of(context).removeCurrentSnackBar(reason: SnackBarClosedReason.dismiss);
},
child: Dismissible(
key: const Key('dismissible'),
direction: DismissDirection.down,
resizeDuration: null,
onDismissed: (DismissDirection direction) {
Scaffold.of(context).removeCurrentSnackBar(reason: SnackBarClosedReason.swipe);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: backgroundColor ?? _kSnackBackground,
borderRadius: BorderRadius.circular(8.0)
),
child: Material(
elevation: 6.0,
color: Colors.transparent,
child: Theme(
data: darkTheme,
child: mediaQueryData.accessibleNavigation ? snackbar : FadeTransition(
opacity: fadeAnimation,
child: snackbar,
),
),
),
),
),
),
);
return ClipRect(
child: mediaQueryData.accessibleNavigation ? snackbar : AnimatedBuilder(
animation: heightAnimation,
builder: (BuildContext context, Widget child) {
return Align(
alignment: AlignmentDirectional.topStart,
heightFactor: heightAnimation.value,
child: child,
);
},
child: snackbar,
),
);
}
// API for Scaffold.addSnackBar():
/// Creates an animation controller useful for driving a snack bar's entrance and exit animation.
static AnimationController createAnimationController({ #required TickerProvider vsync }) {
return AnimationController(
duration: _kSnackBarTransitionDuration,
debugLabel: 'SnackBar',
vsync: vsync,
);
}
/// Creates a copy of this snack bar but with the animation replaced with the given animation.
///
/// If the original snack bar lacks a key, the newly created snack bar will
/// use the given fallback key.
SnackBar withAnimation(Animation<double> newAnimation, { Key fallbackKey }) {
return MySnack(
key: key ?? fallbackKey,
content: content,
backgroundColor: backgroundColor,
action: action,
duration: duration,
animation: newAnimation,
);
}
}
Changes made to SnackBar:
Renamed SnackBarto MySnack
Added implements SnackBar to MySnack class
Set bottom: false inside the SafeArea in MySnack build method
Added a Container around the Material which is the background of the SnackBar
Moved the color declaration from Material to the created Container
Added the desired borderRadius (together with the color) as a BoxDecoration to the Container