Last Updated on 2021-10-25 by Clay
在使用 Flutter 開發 App 時，我們若是有要提醒使用者的訊息，可以藉由 SnackBar 類型的訊息元件來呈現。畢竟在 App 使用上，總無法使用 print() 函式、甚至是替顯示訊息做一個新的界面。
而在 Flutter 中，要顯示 SnackBar 訊息其實非常容易，只需要使用：
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
)
);
以下是完整的範例程式碼。
範例程式碼
import 'package:flutter/material.dart';
void main() => runApp(SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: Text("Show Toast"),
onPressed: () {
final scaffold = ScaffoldMessenger.of(context);
final snackBar = SnackBar(
content: Text("This is a Toast Component"),
action: SnackBarAction(
label: 'CANCEL',
onPressed: () {
scaffold.removeCurrentSnackBar();
},
),
);
// Show
scaffold.showSnackBar(snackBar);
},
),
);
}
}
Output:
點擊後會發現下方出現了 SnackBar 訊息元件。
References
- https://stackoverflow.com/questions/45948168/how-to-create-toast-in-flutter
- https://flutter.dev/docs/cookbook/design/snackbars