Skip to content

[Flutter] 如何使用 AlertDialog 設置『彈出訊息框』

Last Updated on 2021-10-16 by Clay

在 Flutter 中，若是我們想要設計一個彈出式的訊息框，那麼我們可以很簡單地調用 AlertDialog 這個元件來做到這件事。

我們會需要設定以下這些元件：

  • 一個『彈出訊息框』的按鈕
  • AlertDialog 本身的標題、返回按鈕（預設值其實是點擊 AlertDialog 外的空間便會自動返回）
  • （Optional）加入動畫的彈出訊息框

那麼我們就開始吧。

AlertDialog 使用方法

以下我們簡單看個範例程式碼。

import 'package:flutter/material.dart';

// Main
void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

// HomePage
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AlertDialog Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Show AlertDialog"),
          onPressed: () {
            showAlertDialog(context);
          },
        ),
      ),
    );
  }
}

// Show AlertDialog
showAlertDialog(BuildContext context) {
  // Init
  AlertDialog dialog = AlertDialog(
    title: Text("AlertDialog component"),
    actions: [
      ElevatedButton(
        child: Text("OK"),
        onPressed: () {
          Navigator.pop(context);
        }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: () {
            Navigator.pop(context);
          }
      ),
    ],
  );

  // Show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return dialog;
    }
  );
}


Output:

可以發現我在 actions 當中設置了兩個按鈕，這樣我們可以分別設置不同的操作。（雖然這個範例程式碼中兩個動作都是 pop()。）

加入動畫

要在彈出訊息框時加入動畫，最重要的就是使用 showGeneralDialog() 取代 showDialog()。

showGeneralDialog() 會需要設定以下參數：

  • context
  • pageBuilder
  • transitionBuilder
  • transitionDuration

其中，我們暫時不對 context 以及 pageBuilder 進行任何改動。最重要的是 transitionBuilder（動畫呈現效果）、transitionDuration（動畫週期）這兩項。

來將剛才的範例程式碼改寫（只有改動原本 showDialog() 的部分）：

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as math;

// Main
void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

// HomePage
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AlertDialog Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Show AlertDialog"),
          onPressed: () {
            showAlertDialog(context);
          },
        ),
      ),
    );
  }
}

// Show AlertDialog
showAlertDialog(BuildContext context) {
  // Init
  AlertDialog dialog = AlertDialog(
    title: Text("AlertDialog component"),
    actions: [
      ElevatedButton(
        child: Text("OK"),
        onPressed: () {
          Navigator.pop(context);
        }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: () {
            Navigator.pop(context);
          }
      ),
    ],
  );

  // Show the dialog (showDialog() => showGeneralDialog())
  showGeneralDialog(
    context: context,
    pageBuilder: (context, anim1, anim2) {return Wrap();},
    transitionBuilder: (context, anim1, anim2, child) {
      return Transform(
        transform: Matrix4.translationValues(
          0.0,
          (1.0-Curves.easeInOut.transform(anim1.value))*400,
          0.0,
        ),
        child: dialog,
      );
    },
    transitionDuration: Duration(milliseconds: 400),
  );
}


Output:

可以看到，現在彈出訊息框時，會有上下滑動的效果。當然，除了上下滑動之外，我們還可以透過 Transform 進行其他效果，比方說旋轉。這點就讓大家自由嘗試了。

References

Read More

Tags:

Leave a Reply