[Flutter]AlertDialogにFlatButtonを二つ入れたときにボタンの均等揃えができない。

Question

現状イメージ画像のようになっているのですが、ダイアログ下部のflatbutton二つを左右にいい感じに離して表示したいのですがなかなかうまく行きません。
RowにcrossAxisAlignment: MainAxisAlignment.spaceBetween
やら色々試してみたのですが効果がないようで、何か良い方法を知っている方がいらっしゃれば教えていただけないでしょうか？

Gitより挙げております
https://github.com/nannantown/flutter_lang

        return AlertDialog(
          title: Text("コースのロックを解除する!コースのロックを解除する!"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            Center(
              child: Row(
                children: <Widget>[
                    ButtonTheme(
                      minWidth: 20.0,
                      child: FlatButton(
                        color: Colors.blueGrey,
                        child: Text("CMを見る"),
                        onPressed: () {
                          unlockedList.unlock(widget.course.id);
                          print(unlockedList.isUnlocked(widget.course.id));
                          Navigator.of(context).pop();
                        },
                      ),
                    ),
                    FlatButton(
                      color: Colors.blueAccent,
                      child: Text("500円でロックを一括解除"),
                      onPressed: () {
                        unlockedList.unlockAll();
                        Navigator.of(context).pop();
                      },
                    ),
                ],
              ),
            ),
          ],
        );

Answer 1

actions は標準的なボタンの配置しかサポートされていないようです。以下のようにすると、右寄せでボタンが配置されます。

        return AlertDialog(
          title: Text("コースのロックを解除する!コースのロックを解除する!"),
          actions: <Widget>[
            ButtonTheme(
              minWidth: 20.0,
              child: FlatButton(
                color: Colors.blueGrey,
                child: Text("CMを見る"),
                onPressed: () {
                  unlockedList.unlock(widget.course.id);
                  print(unlockedList.isUnlocked(widget.course.id));
                  Navigator.of(context).pop();
                },
              ),
            ),
            FlatButton(
              color: Colors.blueAccent,
              child: Text("500円でロックを一括解除"),
              onPressed: () {
                unlockedList.unlockAll();
                Navigator.of(context).pop();
              },
            ),
          ],
        );

content を使えば、自分でボタンの配置についても指定できると思います。ただし、ボタンが横に並びきれなかった場合の考慮なども自分でやる必要が出てくるかもしれません。

        return AlertDialog(
          title: Text("コースのロックを解除する!コースのロックを解除する!"),
          content: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ButtonTheme(
                minWidth: 20.0,
                child: FlatButton(
                  color: Colors.blueGrey,
                  child: Text("CMを見る"),
                  onPressed: () {
                    unlockedList.unlock(widget.course.id);
                    print(unlockedList.isUnlocked(widget.course.id));
                    Navigator.of(context).pop();
                  },
                ),
              ),
              FlatButton(
                color: Colors.blueAccent,
                child: Text("500円でロックを一括解除"),
                onPressed: () {
                  unlockedList.unlockAll();
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );

Comments

[namihana]

いつもご回答ありがとうございます！
挙げていただいたコードで正常に動作しました。

全部contentに入れるということは試しておりませんでした。
元々Webの経験しかなかったもので、CSSのように全部操作できると考えがちになってしまうのですが、角プラットフォームの型のような物をもっと深く理解する必要がありそうですね。
勉強になりました。