import 'package:flutter/material.dart';

class CardNote extends StatelessWidget {
  const CardNote({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: const [
              Card(
                elevation: 3,
                color: Colors.amber,
                child: SizedBox(
                  width: 200,
                  height: 200,
                  child: Center(
                      child: Text(
                    'Card 1',
                  )),
                ),
              ),
              Card(
                elevation: 3,
                color: Colors.amber,
                child: SizedBox(
                  width: 200,
                  height: 200,
                  child: Center(
                      child: Text(
                    'Card 2',
                  )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When I add this widget to the page where I want to show the cards, I can show 2 widgets in a single line. Then when I call the same widget again, I get the following error.

RenderCustomMultiChildLayoutBox object was given an infinite size during layout.This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.

return Scaffold(
  body: Container(
    child: Row(
      children: const [
        CardNote(),
        SizedBox(
          height: 50,
        ),
        CardNote()
      ],
    ),
  ),
);

This is how I add the cards to the page I want to show.

This is how I want to show 4 cards in the middle of the page

This is how it looks on my page. It shows at the top of the page, not in the middle.

CodePudding user response：

You can wrap your CardNote widget with Expanded widget. And use a top level scrollable widget. Also you dont need to us multiple scaffold

home: Scaffold(
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        CardNote(),
        SizedBox(
          height: 50,
        ),
        CardNote(),
      ],
    ),
  ),
),

While the card is fixed width, you can provide it

class CardNote extends StatelessWidget {
  const CardNote({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Card(
              elevation: 3,
              color: Colors.amber,
              child: SizedBox(
                width: 200,
                height: 200,
                child: Center(
                    child: Text(
                  'Card 1',
                )),
              ),
            ),
            Card(
              elevation: 3,
              color: Colors.amber,
              child: SizedBox(
                width: 200,
                height: 200,
                child: Center(
                    child: Text(
                  'Card 2',
                )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You are trying to add a row which has alignment of spaceEven inside another row. When you added the first set of cards it got aligned evenly. On second set you have 2 set of rows inside a row each one has alignment of spaceEven..

Depending on the layout if you wish to show these cards one below the other set then use a Column widget

return Scaffold(
  body: Container(
    child: Column(//here
      children: const [
        CardNote(),
        SizedBox(
          height: 50,
        ),
        CardNote()
      ],
    ),
  ),
);