Flutter AlertDialog의 너비를 화면 가득 늘립니다.

AlertDialog의 너비를 화면 가득 늘리고 싶습니다.

원래는 통상의 화면이었던 것을, 다이얼로그화해 주었으면 한다고 말해져,
다이얼로그화했지만, 아무래도 비좁은 느낌이 되어 버리고 있었으므로,
다이얼로그의 패딩을 줄여달라고 했지만, 조금 막힌 이야기.

일반 AlertDialog

보통 Dialog를 표시하는 경우는 아래와 같은 코드가 된다고 생각합니다.

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('タイトル'),
      content: Text('メッセージ'),
      actions: [
        ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('キャンセル'),
        ),
        ElevatedButton(
          onPressed: () => Navigator.pop(context, 'OK'),
          child: Text('OK'),
        ),
      ],
    );
  },
);

런타임 이미지


위 코드의 content 부분을 다음과 같이 변경

content: Container(
  width: 400,
  child: Text('メッセージ'),
),

런타임 이미지


아무것도 변하지 않았다! !
원인은 AlertDialog에 기본적으로 여백이 설정된 것이었다.
아래와 같이 insetPadding 를 설정하는 것으로 문제없이 폭을 넓힐 수 있었다.

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      insetPadding: EdgeInsets.all(8),
      title: Text('タイトル'),
      content: Container(
        width: 400,
        child: Text('メッセージ'),
      ),
      actions: [
        ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('キャンセル'),
        ),
        ElevatedButton(
          onPressed: () => Navigator.pop(context, 'OK'),
          child: Text('OK'),
        ),
      ],
    );
  },
);

런타임 이미지


무사히 다이얼로그의 폭을 넓힐 수 있었다.