FlutterのContainerウィジェットの基本的な使い方

Containerウィジェットは、サイズ、背景色、余白、子ウィジェットの配置などを指定できる便利なウィジェットです。以下に、Containerウィジェットを使った簡単な例を示します。

例: 青い四角形の中央に「Hello, World!」というテキストを表示する

Container(
  width: 100.0,
  height: 100.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(10),
  ),
  alignment: Alignment.center,
  child: Text('Hello, World!'),
)

使用したプロパティー

• width:

  • 用途: Containerの幅を指定します。
  • 例: width: 100.0,

• height:

  • 用途: Containerの高さを指定します。
  • 例: height: 100.0,

• decoration:

  • 用途: Containerの背景画像や境界線、影などの装飾を指定します。
  • 例:

  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(10),
  ),
  

  • プロパティ:
    • color: Containerの背景色を指定します。
    • border: Containerの境界線を指定します。
    • borderRadius: Containerの角の丸みを指定します。

• alignment:

  • 用途: 子ウィジェットをContainer内でどのように配置するかを指定します。
  • 例: alignment: Alignment.center,

• child:

  • 用途: Container内に配置する子ウィジェットを指定します。
  • 例: child: Text('Hello, World!')

他にもこんなプロパティがあります

• margin: Containerの外側の余白を指定します。
• padding: 子ウィジェットの内側の余白を指定します。
• constraints: Containerの最小・最大幅と高さを指定します。
• transform: Containerに対する変換行列を指定します（回転、スケーリングなど）。
• clipBehavior: 子ウィジェットの範囲をどのようにクリップするかを指定します。

---

以上がContainerウィジェットの基本的な使い方とそのプロパティの説明です。これを基に、様々なレイアウトやデザインを試してみてください。この記事が皆さんのFlutter開発に役立つことを願っています！