반응형

Container의 테두리 중 아래와 같이

맨 밑에만 색상을 주는 경우가 있습니다.

 

 

 

이때는 Container의  decoration의

border.bottom에 색상 밑 두께를 지정하면 됩니다.

(다른 방향은 left, top, right를 쓰면 됩니다.)

 

Container(
  decoration: const BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.black,
        width: 1.0,
      ),
    ),
  ),
)

 

전체소스

Container(
  decoration: const BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.black,
        width: 1.0,
      ),
    ),
  ),
  width: double.infinity,
  height: 50,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        margin: const EdgeInsets.only(left: 15),
        child: const Text('로그아웃'),
      ),
      Container(
        margin: const EdgeInsets.only(right: 15),
        child: const Icon(Icons.settings),
      ),
    ],
  ),
)
반응형

+ Recent posts