Flutter에서 borderRadius가 있는 Container에 테두리 추가하기, Add border to a Container with borderRadius in Flutter

질문

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

이것은 녹색 왼쪽 테두리가 있는 둥근 모서리 컨테이너와 "This is a Container"라는 자식 텍스트를 표시해야하지만, 둥근 모서리 컨테이너와 자식 및 왼쪽 테두리가 보이지 않습니다.

borderRadius 객체를 제거하면 자식 텍스트와 녹색 왼쪽 테두리가 보이지만, 도입하면 다시 왼쪽 테두리와 자식 텍스트가 숨겨집니다.

주요 문제는 사용자 정의 왼쪽 테두리인 것 같습니다. border: Border.all(width: 0) 및 borderRadius: BorderRadius.circular(10)을 사용하면 필요한대로 모서리가 둥근 모양으로 나타나고 자식이 표시됩니다. 그러나 이제 특정 설정에서 매우 중요한 녹색 왼쪽 테두리를 적용할 수 없습니다.

그래서 제가 뭘 잘못하고 있는지, 플러터에서 버그인지, 아니면 그냥 허용되지 않는 것인지 궁금합니다.

미리 감사드립니다.

편집 : 아래 이미지는 최종 결과입니다. 색상은 중요하지 않습니다

답변

동시에 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),
      )
    ],
  ),
),