[flutter] showModalBottomSheet() 테두리 수정

1.문제

 

showModalBottomSheet에서 테두리를 수정할 때

가장 안쪽의 Container의 테두리를 수정하면 아무 변화도 나타나지 않는다.

 

---

 

2. 해결

 

바깥에 Container를 한번 더 감싸준 다음

바깥 Container의 color을 기본 modalBottomSheet의 그림자 색깔인

Color(0xFF737373) 으로 설정하면

바뀐 모습을 볼 수 있다.

showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: _width,
            color: Color(0xFF737373),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(_width * 0.021,),
                      topRight: Radius.circular(_width * 0.021,)
                  )
              ),
              child: Column(
                children: <Widget>[
                  ListTile(
                    title: Text('최신순'),
                    subtitle: Text('최신순으로 댓글이 표시됩니다'),
                    onTap: () {
                      _onSortButtonSelected(0);
                    },
                  ),
                  ListTile(
                    title: Text('인기순'),
                    subtitle: Text('인기순으로 댓글이 표시됩니다'),
                    onTap: () {
                      _onSortButtonSelected(1);
                    },
                  ),
                ],
              ),
            ),
          );
        });