I'm learning flutter and I have made an app that looks like this:

I'm facing a problem as to how to fix the container fixed on a particular spot on the screen like it has to be aligned to the top center. Here's the problem I'm facing:

Here's the code:
class Program7 extends StatefulWidget {
  const Program7({super.key});

  @override
  State<Program7> createState() => _Program7State();
}

class _Program7State extends State<Program7> {
  double cHeightAndWidth = 300;

  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            height: cHeightAndWidth,
            width: cHeightAndWidth,
            decoration: BoxDecoration(
              color: Colors.purple,
            ),
          ),
          Column(
            children: [
              //A bunch of rows of buttons,
            ],
          ),
        ],
      ),
    );
  }
}


P.S.: I already tried to fix the container to the top center of another container using align but the purple color somehow bleeds out into the bigger container.

How to fix a container at a particular spot on the screen
The issue is using MainAxisAlignment.spaceAround,. It will use the free space and put half before and another half at end of the child.
You can use fixed gap for top(Container).
return SafeArea(
  child: Column(
    children: [
      SizedBox(height: 50),
      Container(
        height: cHeightAndWidth,
        width: cHeightAndWidth,
        decoration: BoxDecoration(
          color: Colors.purple,
        ),
      ),
      Spacer(), // or other widget
      Column(
        children: [
          //A bunch of rows of buttons,
        ],
      ),
    ],
  ),
);

