今天剛好在開發上遇到相關的問題，就是當我們需要顯示一個全螢幕的 dialog 時該使用哪種元件來完成，開發內容會以前面的使用者清單為基礎，再點選清單後顯示全螢幕的對話框。

建構對話框UI

全屏的對話框能夠提供給我們更多的操作，在這邊我們只需要像是創建一般頁面一樣即可，這裡我使用 Scaffold 來創建它

class UserInfoDialog extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _UserInfoState() ;
  }
}


class _UserInfoState extends State<UserInfoDialog> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(),
    );
  }
}

開啟 Dialog

透過 Navigator 來打開對話框，Navigator 的詳細內容可以參考之前的文章
-> Flutter 頁面轉跳 Navigator
重點是發現了底下有個 fullscreenDialog 的屬性我們將它設定為 true，就能順利完成全螢幕的 Dialog 了

 void openDialog() {
    Navigator.of(context).push( MaterialPageRoute<void>(
        builder: (BuildContext context) {
          return UserInfoDialog();
        },
        fullscreenDialog: true));
  }