【Flutter 程式設計入門實戰 30 天】Day 18:SnackBar 提示元件

【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第十八天,KT 將為大家來介紹,SnackBar 提示元件。

SnackBar 提示元件

SnackBar 提示元件,會在螢幕下方,彈跳顯示訊息,幾秒後消失。

範例:顯示 SnackBar 簡單基本訊息

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("顯示訊息")));

執行畫面

完整程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('顯示 SnackBar 訊息'),
        onPressed: () {
          //顯示 SnackBar 簡單基本訊息
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("顯示訊息")));
        },
      ),
    );
  }
}

注意事項:
SnackBar 要顯示訊息是透過 Scaffold的showSnackBar 方法來顯示。所以要顯示訊息,務必要先拿到 Scaffold 的 context,否則會報錯無法顯示。當然可以直接在 body 後包一層 Builder 快速解決,不過 KT 建議不要寫出波動拳程式結構。所以在最一開始起手式章節 KT 就直接建議拆開,分成一小塊一小塊邏輯程式,維護、閱讀比較方便,降低程式耦合性比較容易擴充與變動。

範例:顯示 SnackBar 訊息與自定義按鈕

void showMySnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: const Text('顯示訊息'),
      duration: const Duration(seconds: 5),
      action: SnackBarAction(
        label: '復原',
        onPressed: () {
          print('復原...');
        },
      ),
    ));
  }

執行畫面

完整程式碼

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('HKT線上教室'),
          ),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('顯示 SnackBar 訊息'),
        onPressed: () {
          showMySnackBar(context);
        },
      ),
    );
  }

  //顯示 SnackBar 訊息與自定義按鈕
  void showMySnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: const Text('顯示訊息'),
      duration: const Duration(seconds: 5),
      action: SnackBarAction(
        label: '復原',
        onPressed: () {
          print('復原...');
        },
      ),
    ));
  }
}

那今天就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
www.freepik.com

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

Android Studio 歷代版本下載點

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)