What am I doing wrong with this code? Widgets become invisible

Question

I am trying to learn flutter and I couldn't figure out what is wrong with this simple page. CustomContainer works on its own but when I use them like the tree shown below, they become invisible. There is something wrong with my usage of row and column combination. I tried all the axisalignment values but they don't do anything. I want to show 6 containers like below.

The page I'm trying to create

Here is the CustomContainer:

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

  @override
  Widget build(BuildContext context) {
    return Flexible(
        child: FractionallySizedBox(
      alignment: Alignment.center,
      widthFactor: 0.8,
      heightFactor: 0.8,
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
        child: Container(
          // alignment: Alignment.center,
          child: Text('Subjects'),
          color: Colors.green,
        ),
      ),
    ));
  }
}

And here is the page I'm trying to create:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Appbar',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Row(
          //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                CustomContainer2(),
                CustomContainer2(),
                CustomContainer2(),
              ],
              //    mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),
            Column(
              children: [
                CustomContainer2(),
                CustomContainer2(),
                CustomContainer2(),
              ],
              //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

How about this one?

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          child: Container(
            child: Center(child: Text('Subjects')),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

and

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Appbar',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(
              child: CustomContainer2(),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Column(
                      children: [
                        CustomContainer2(),
                        CustomContainer2(),
                        CustomContainer2(),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: [
                        CustomContainer2(),
                        CustomContainer2(),
                        CustomContainer2(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

I'm not sure, but, how about this?

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          child: Container(
            child: Center(child: Text('Subjects')),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

and

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Appbar',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Row(
          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Column(
                children: [
                  CustomContainer2(),
                  CustomContainer2(),
                  CustomContainer2(),
                ],
                //    mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  CustomContainer2(),
                  CustomContainer2(),
                  CustomContainer2(),
                ],
                //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

Here is your updated code

Scaffold(
      appBar: AppBar(
        title: Text(
          'Appbar',
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: [
            CustomContainer2(),
            Row(
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Column(
                    children: [
                      CustomContainer2(),
                      CustomContainer2(),
                      CustomContainer2(),
                    ],
                    //    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      CustomContainer2(),
                      CustomContainer2(),
                      CustomContainer2(),
                    ],
                    //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

And the CustomContainer2 class is

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 7, bottom: 20, right: 7),
      height: 120,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black),
      ),
      alignment: Alignment.center,
      child: Text('Subjects'),
    );
  }
}