AlertDialogに細工する

Dialogは出したい、でも元の表示も見たい

「四次元年表 for Mobile」をつくっている。
登録と検索だけじゃなく、ちょっとしたゲームもつけた。
誤答が赤でマークされるのだけれど、
そこに「残念、再挑戦しますか？」というAlertが被って、
せっかくのヒントが見えない。

まずDialogの位置を変える

Dialogそのものを中央じゃなく、下方に出す。
AlertDialogをColumnで囲って、end指定する。
Columnの中にはDialogしかないけど、childrenになるのね･･･。

まだ被ってるので透過させよう

backgroundColorにopacityをかける。

こんな感じ

  void _showRetryOrNewGameDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return Column(    <=Columnで囲って
            mainAxisAlignment: MainAxisAlignment.end,　<=endに指定して
            children: [
              AlertDialog(
                backgroundColor: Colors.white.withOpacity(0.5),　<=透過させる
                title: const Text("残念！"),
                content: const Text("再挑戦しますか？"),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                      _retry(); // 同じカードで再挑戦
                    },
                    child: const Text('同じカードでもう一度'),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                      _resetGame(); // 新しいゲームを開始
                    },
                    child: const Text('新しいゲーム'),
                  ),
                ],
              ),
            ],
          );
        }
    );
  }