我可以在Flutter中创建类似Toasts的东西吗?
只是一个很小的通知窗口,不直接面对用户,也不锁定或淡出它后面的视图。
我可以在Flutter中创建类似Toasts的东西吗?
只是一个很小的通知窗口,不直接面对用户,也不锁定或淡出它后面的视图。
当前回答
导入库fluttertoast: 3.1.3
像下面这样使用它:
Fluttertoast.showToast(
msg: "Hello, World!",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,
);
其他回答
将flutter_just_toast添加到Pubspecs中的依赖项中。yaml文件。
依赖关系:
flutter_just_toast: ^1.0.1
接下来将包导入到你的类中:
import 'package:flutter_just_toast/flutter_just_toast.dart';
用一条消息实现Toast:
Toast.show(message: "Your toast message",
duration: Delay.SHORT,
textColor: Colors.black);
更新:Scaffold.of(上下文)。showSnackBar在Flutter 2.0.0中已弃用(稳定)
你可以使用ScaffoldMessenger.of(context)访问父类ScaffoldMessengerState。
然后做一些类似的事情
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
));
零食条是材料设计的官方“吐司”。看到间小吃店。
下面是一个完整的例子:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Snack bar'),
),
body: Center(
child: RaisedButton(
onPressed: () => _showToast(context),
child: const Text('Show toast'),
),
),
);
}
void _showToast(BuildContext context) {
final scaffold = ScaffoldMessenger.of(context);
scaffold.showSnackBar(
SnackBar(
content: const Text('Added to favorite'),
action: SnackBarAction(label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
),
);
}
}
对于Flutter中的toast消息,使用bot_toast库。这个库提供了丰富的功能,支持显示通知、文本、加载、附件等。烤面包
你可以很容易地实现这种效果使用叠加。
代码:
OverlayEntry entry = OverlayEntry(builder: (context) {
return Positioned(
top: MediaQuery.of(context).size.height * 0.8,
child: Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
child: const Card(
color: Colors.redAccent,
child: Padding(
padding: EdgeInsets.all(8),
child: Text("This is a message."),
),
),
));
});
//show overlay
Overlay.of(context)!.insert(entry);
//auto remove this overlay after 3 seconds
Future.delayed(const Duration(seconds: 3)).then((value) => entry.remove());
截图:
用https://pub.dev/packages/toast做吐司。这个库非常容易使用,适用于iOS和Android。
显示Toast的语法:
Toast.show("Toast plugin app", duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);