Question 266221 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can I create a square AlertDialog?

How can I make an AlertDialog square? I’ve tried writing code like the one below, but I can’t seem to make it square for some reason.
I tried experimenting by changing width to margin, but I couldn’t make it square. Also, with AspectRatio, I can make it square, but I can’t specify the size.

If anyone knows a method to make an AlertDialog square while specifying its size, please let me know.

DartPad

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  AlertDialog(
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
      alignment: Alignment.center,
      contentPadding: EdgeInsets.zero,
      insetPadding: EdgeInsets.zero,
      content: Container(
        height: 100,
        width: 100,
        color: Colors.amber,
      ),
    ),
    );
  }
}

enter image description here

Tags:

2

Answers


  1. 0

    I think there is no other way other than wrapping it in a SizedBox widget or Container widget and specify height & width

    SizedBox(
  height: 200,
  width: 200,
  child: AlertDialog(
    shape:
        const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
    alignment: Alignment.center,
    contentPadding: EdgeInsets.zero,
    insetPadding: EdgeInsets.zero,
    content: Container(
      color: Colors.red,
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    The AlertDialog take the total allocated width of the parent.

    One of the way to solve that, will be to put your alert dialog in a SizedBox where you will specify the width.

    Center(
    child: SizedBox(
      width: 100,
      height: 100,
      child: AlertDialog(
        alignment: Alignment.center,
        contentPadding: EdgeInsets.zero,
        insetPadding: EdgeInsets.zero,
        content: Container(
          color: Colors.amber,
        ),
      ),
    ),
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search