본문 바로가기
Flutter/Flutter FAQ

Flutter 컨테이너 위젯 내부에는 테두리 반경이 적용되지 않습니다., border radius not apply inside container widget

by 베타코드 2023. 10. 3.
반응형

질문


자식 Container 내부에는 테두리 반경이 적용되지 않습니다. SizedBoxStack 위젯을 사용해 보았지만, 컨테이너 내부에 테두리가 필요합니다.

Scaffold(
  appBar: AppBar(
    title: new Text("ListView"),
  ),
  body: Center(
      child: Padding(
        padding: EdgeInsets.all(15.0),
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                border: Border.all(
                    color: Colors.green,
                    width: 2.0
                )
            ),
            child: Container(
              color: Colors.red,
            )
        ),
      )
  )
)


답변


다음을 시도해보세요, ClipRRect를 사용하고 다른 Container 안에 중첩하고 이제 비균일한 테두리를 추가할 수 있습니다.

Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        padding: EdgeInsets.all(20),
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(color: Colors.indigo, width: 5),
                          ),
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.home),
                            Text("Home"),
                          ],
                        ),
                      ),
                    ),
                  )
반응형

댓글