MENU

【Flutter】Containerに枠線(Border)をつけるには?

記事内に商品プロモーションが含まれる場合があります

FlutterのContainerに枠線をつけるには、BoxDecorationを使用してborderプロパティを設定します。

目次

四辺に枠線をつける

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.black, // 枠線の色
      width: 2.0, // 枠線の幅
    ),
  ),
);

この例ではBoxDecorationborderプロパティにBorder.allを使用して、枠線の色と幅を指定しています。Border.allの引数には、colorで枠線の色、widthで枠線の幅を設定します。これらの値を必要に応じて調整してください。

特定の辺にだけ枠線をつける

特定の辺だけにボーダーを付けるには、BoxDecorationborderプロパティを使い、Borderクラスの特定の辺に対応するプロパティを設定します。

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    color: Colors.yellow,
    border: Border(
      // 下辺にのみボーダーを付ける
      bottom: BorderSide(
        color: Colors.black, // 枠線の色
        width: 2.0, // 枠線の幅
      ),
    ),
  ),
);

この例では、Borderクラスのbottomプロパティを使用して下辺にボーダーを付けています。他の辺にボーダーを付けたい場合は、Borderクラスの対応するプロパティ(topleftright)を設定してください。

関連記事

Flutterが学べる書籍

created by Rinker
シーアンドアール研究所
Share
  • URLをコピーしました!

Comment

コメントする

目次