☰

FlutterでborderRadiusを使用してコンテナに境界線を追加する 質問する

tag-icon • tag-icon flutter dart flutter-layout
FlutterでborderRadiusを使用してコンテナに境界線を追加する 質問する 
Container(
      child: Text(
          'This is a Container',
          textScaleFactor: 2,
          style: TextStyle(color: Colors.black),
      ),

      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          border: Border(
              left: BorderSide(
                  color: Colors.green,
                  width: 3,
              ),
            ),
          ),
      height: 50,
     ),

これは、幅 3 ピクセルの緑の左境界線を持つ丸みを帯びたコンテナーと、子テキスト「This is a Container」を表示するはずです。しかし、非表示の子と非表示の左境界線を持つ丸みを帯びたコンテナーのみが表示されます。

borderRadius オブジェクトを取り出すと、子テキストと緑の左境界線が表示されますが、これを導入すると、左境界線と子テキストが再び非表示になります。

主な問題は、カスタムの左境界線にあるようです。 と を使用するとborder: Border.all(width: 0)、borderRadius: BorderRadius.circular(10)必要に応じてエッジが丸くなり、子も表示されるからです。 しかし、この特定の設定では非常に重要な緑の左境界線を適用できなくなりました。

何か間違っているのでしょうか、それともこれは Flutter のバグなのでしょうか、それとも単に許可されていないだけなのでしょうか?

よろしくお願いします。

編集：下の画像が最終結果です。色は関係ありません

これが本来の姿だ

ベストアンサー1

border: と borderRadius: を同時に追加することはできません。次のエラーが発生します:

borderRadius は均一な境界に対してのみ指定できます。

次のように、border: の代わりに borderRadius: と boxShadow: を使用すると、目的を達成できます。

boxShadow: [
  BoxShadow(color: Colors.green, spreadRadius: 3)
]

サンプルコードは次のようになります。

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

編集：今提供した例を実現するには、次のようにします。

Container(
  padding: EdgeInsets.only(left: 12.0),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  height: 50,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0)),
      color: Colors.white,
    ),
    child: Text(
      'This is a Container',
      textScaleFactor: 2,
      style: TextStyle(color: Colors.black),
    ),
  ),
),

別の解決策:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.white,
  ),
  height: 50,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        width: 12.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0)),
          color: Colors.green,
        ),
      ),
      Text(
        'This is a Container',
        textScaleFactor: 2,
        style: TextStyle(color: Colors.black),
      )
    ],
  ),
),

おすすめ記事