Skip to content

[Flutter] 如何建立 SnackBar 訊息元件

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

Read More

Tags:

Leave a Reply