How to show custom toast dialog in flutter? - dart

Question

I want to show a custom toast (my own widget layout). I know how to show a custom alert dialogue, but that's not what I want.
Because, Alert dialogue:
Has a black background
Prevents touches when it's shown
Has to dismiss manually
I don't want to use flutter toast library because I can't make a custom layout with that.
I want to show my own layout on top of all other widgets and make it disappear after some time. Also, it should not prevent any input when it's shown.

Answer 1

You can add this library to add and customize your own toasts.
Widget widget = Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: Container(
width: 40.0,
height: 40.0,
color: Colors.grey.withOpacity(0.3),
child: Icon(
Icons.add,
size: 30.0,
color: Colors.green,
),
),
),
);
ToastFuture toastFuture = showToastWidget(
widget,
duration: Duration(seconds: 3),
onDismiss: () {
print("the toast dismiss"); // the method will be called on toast dismiss.
},
);

Answer 2

custom toast
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Toast {
static void show(
String msg,
BuildContext context) {
Color textColor = Colors.white;
Color backgroundColor = Colors.blueAccent;
dismiss();
Toast._createView(msg, context, backgroundColor, textColor);
}
static OverlayEntry _overlayEntry;
static bool isVisible = false;
static void _createView(
String msg,
BuildContext context,
Color background,
Color textColor,
) async {
var overlayState = Overlay.of(context);
final themeData = Theme.of(context);
_overlayEntry = new OverlayEntry(
builder: (BuildContext context) => _ToastAnimatedWidget(
child: Container(
width: MediaQuery.of(context).size.width,
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: Container(
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(20),
),
margin: EdgeInsets.symmetric(horizontal: 20),
padding: EdgeInsets.fromLTRB(16, 10, 16, 10),
child: Text(
msg,
softWrap: true,
style: themeData.textTheme.body1.copyWith(
fontFamily: 'intel',
color: Colors.white,
),
),
),
),
),
),
);
isVisible = true;
overlayState.insert(_overlayEntry);
}
static dismiss() async {
if (!isVisible) {
return;
}
isVisible = false;
_overlayEntry?.remove();
}
}
class _ToastAnimatedWidget extends StatefulWidget {
_ToastAnimatedWidget({
Key key,
#required this.child,
}) : super(key: key);
final Widget child;
#override
_ToastWidgetState createState() => _ToastWidgetState();
}
class _ToastWidgetState extends State<_ToastAnimatedWidget>
with SingleTickerProviderStateMixin {
bool get _isVisible => true; //update this value later
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Positioned(
bottom: 50,
child: AnimatedOpacity(
duration: Duration(seconds: 2),
opacity: _isVisible ? 1.0 : 0.0,
child: widget.child,
)
);
}
}
for call
Toast.show(ApiContent.something_wrong, context);