A card inside a dialog occupies full screen

Question

I am using a card inside a dialog. It occupies full screen even though the child of the card has a container widget of fixed width and height. I am using the below code:

showDialog(context: context, builder: (context)
{
  return Card(
    clipBehavior: Clip.antiAlias,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
    elevation: 8.0,
    child: Container(
      width: MediaQuery.of(context).size.width * 0.80,
      height: 300,
      color: const Color(0xFF465A63)
    ),
  );
});

Answer 1

Wrap the Card in a size-constraining widget like SizedBox , FractionallySizedBox or Container . Give it a certain size and position it on the screen using Center or Align .

By default the showDialog() method gives you the whole screen to compose a widget, not only the small window the AlertDialog() widget for example uses.