FlutterのContainerウィジェット使い方

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MainAxisAlignment sample')),
        body: Center(
          child: Column(
            // 主軸（縦方向）の中央に配置
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
             Container(
  width: 200,
  height: 100,
  // 外側の余白
  margin: const EdgeInsets.all(16.0),
  // 内側の余白
  padding: const EdgeInsets.all(12.0),
  // 子要素の配置（中央寄せ）
  alignment: Alignment.center,
  
  // デザインの装飾（※ color は decoration の中に書く必要があります）
  decoration: BoxDecoration(
    color: Colors.blue, // 背景色
    borderRadius: BorderRadius.circular(12.0), // 角丸
    border: Border.all(color: Colors.black, width: 2), // 枠線
    boxShadow: const [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5.0,
        offset: Offset(2, 2), // 影
      ),
    ],
  ),
  
  // 中身のウィジェット
  child: const Text(
    'Containerの例',
    style: TextStyle(color: Colors.white),
  ),
),
Container(
  width: 200,
  height: 100,
  // 外側の余白
  margin: const EdgeInsets.all(16.0),
  // 内側の余白
  padding: const EdgeInsets.all(12.0),
  // 子要素の配置（中央寄せ）
  alignment: Alignment.center,
  
  // デザインの装飾（※ color は decoration の中に書く必要があります）
  decoration: BoxDecoration(
    color: const Color.fromARGB(255, 3, 252, 102), // 背景色
    borderRadius: BorderRadius.circular(12.0), // 角丸
    border: Border.all(color: Colors.black, width: 2), // 枠線
    boxShadow: const [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5.0,
        offset: Offset(2, 2), // 影
      ),
    ],
  ),
  
  // 中身のウィジェット
  child: const Text(
    'Containerの例',
    style: TextStyle(color: Colors.red),
  ),
)
            ],
          ),
        ),
      ),
    );
  }
}