[解決済み] 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,
     ),

これは、丸みを帯びた角のあるコンテナと、幅3pxの緑の左ボーダー、および子テキスト "これはコンテナです"を表示することになっています。しかし、これは丸みを帯びたコンテナと見えない子、見えない左ボーダーを表示するだけです。

borderRadiusオブジェクトを取り出すと、子Textと緑の左ボーダーが見えますが、導入すると再び左ボーダーと子Textが非表示になります。

大きな問題は、カスタム左ボーダーと思われます。 border: Border.all(width: 0) と borderRadius: BorderRadius.circular(10) は、必要に応じて縁を丸くし、子も表示します。しかし、この特殊な設定において非常に重要な、緑の左ボーダーを適用することができません。

何か間違ったことをしているのか、それともflutterのバグなのか、それとも許されないことなのでしょうか？

よろしくお願いします。

編集部：下の画像は最終的な結果です。色は重要ではありません

解決方法は？

border:とborderRadius:を同時に指定すると、このエラーが発生します。

borderRadiusは一様なボーダーに対してのみ与えることができます。

borderRadius:とboxShadow:を使って、border:の代わりに以下のようにすれば、望みのものが実現できます。

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),
      )
    ],
  ),
),