FlutterでContainerをデザインする方法

FlutterのContainerウィジェットは、アプリケーションのレイアウトとデザインにおいて非常に重要な部品です。この記事では、Containerを使って様々なデザインを実現する方法を紹介します。

シンプルな色付きボックス

まずは基本の色付きボックスから始めましょう。以下のコードを使って、背景色が設定されたシンプルなボックスを作成できます。

Container(
  color: Colors.blue,
  width: 100,
  height: 100,
)

ボーダー付きボックス

次に、ボーダーを追加してみましょう。BoxDecorationウィジェットを使って、枠線を設定します。

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.black, width: 2),
  ),
  width: 100,
  height: 100,
)

角丸のボックス

ボックスの角を丸くするには、borderRadiusプロパティを使います。

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(10),
  ),
  width: 100,
  height: 100,
)

丸い形のContainer

円形のContainerを作成するには、BoxDecorationウィジェットのshapeプロパティを使用します。
コードをコピーする

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    shape: BoxShape.circle,
  ),
  width: 100,
  height: 100,
)

シャドウ付きボックス

ボックスにシャドウを追加して立体感を出すには、boxShadowプロパティを使用します。

Container(
  decoration: BoxDecoration(
    color: Colors.orange,
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(2, 2),
        blurRadius: 5,
      ),
    ],
  ),
  width: 100,
  height: 100,
)

グラデーション背景のボックス

背景にグラデーションを設定することで、より視覚的に魅力的なボックスを作成できます。

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
  ),
  width: 100,
  height: 100,
)

画像背景のボックス

背景に画像を設定することも可能です。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  width: 100,
  height: 100,
)

パディングとマージンの設定

コンテンツの周囲にスペースを追加するには、paddingとmarginプロパティを使用します。

Container(
  color: Colors.yellow,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(10),
  child: Text('Padded Container'),
)

透過ボックス

背景を透過させることで、下のレイヤーが見えるようにします。

Container(
  color: Colors.transparent,
  width: 100,
  height: 100,
  child: Text('Transparent Container'),
)

星形のContainer

星形のContainerを作成するには、カスタムクリップパスを使用します。以下のコード例では、CustomClipperを使って星形を描画します。

class StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    double w = size.width;
    double h = size.height;
    path.moveTo(w * 0.5, 0);
    path.lineTo(w * 0.61, h * 0.35);
    path.lineTo(w, h * 0.35);
    path.lineTo(w * 0.68, h * 0.57);
    path.lineTo(w * 0.79, h);
    path.lineTo(w * 0.5, h * 0.73);
    path.lineTo(w * 0.21, h);
    path.lineTo(w * 0.32, h * 0.57);
    path.lineTo(0, h * 0.35);
    path.lineTo(w * 0.39, h * 0.35);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

Container(
  width: 100,
  height: 100,
  child: ClipPath(
    clipper: StarClipper(),
    child: Container(
      color: Colors.yellow,
    ),
  ),
)