[위젯] Chip, shape

shape: RoundedRectangleBorder

Chip(
  backgroundColor: Colors.red[100],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(defaultSize),
    side: BorderSide(
      color: Colors.red[300],
      width: 1.0,
    ),
  ),
  label: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: (defaultSize * .4),
      vertical: (defaultSize * .2),
    ),
    child: Text(
      "Rounded Rectangle Border",
      style: TextStyle(fontSize: defaultSize),
    ),
  ),
),

---

 

shape: BeveledRectangleBorder

Chip(
  backgroundColor: Colors.orange[100],
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(defaultSize),
    side: BorderSide(
      color: Colors.orange[300],
      width: 1.0,
    ),
  ),
  label: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: (defaultSize * .4),
      vertical: (defaultSize * .2),
    ),
    child: Text(
      'Beveled Rectangle Border',
      style: TextStyle(fontSize: defaultSize),
    ),
  ),
),

---

 

shape: ContinuousRectangleBorder

Chip(
  backgroundColor: Colors.yellow[100],
  shape: ContinuousRectangleBorder(
    side: BorderSide(
      color: Colors.yellow[300],
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(defaultSize),
  ),
  label: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: (defaultSize * .4),
      vertical: (defaultSize * .2),
    ),
    child: Text(
      'Continuous Rectangle Border',
      style: TextStyle(fontSize: defaultSize),
    ),
  ),
),

---

 

shape: StadiumBorder

Chip(
  backgroundColor: Colors.green[100],
  shape: StadiumBorder(
    side: BorderSide(
      color: Colors.green[300],
      width: 1.0,
    ),
  ),
  label: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: (defaultSize * .4),
      vertical: (defaultSize * .2),
    ),
    child: Text(
      'Stadium Border',
      style: TextStyle(fontSize: defaultSize),
    ),
  ),
),

---

 

shape: CircleBorder

Chip(
  backgroundColor: Colors.blue[100],
  shape: CircleBorder(
    side: BorderSide(
        color: Colors.blue[300],
        width: 1.0,
        style: BorderStyle.solid),
  ),
  label: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: (defaultSize * .4),
      vertical: (defaultSize * .2),
    ),
    child: Text(
      'Circle Border',
      style: TextStyle(fontSize: defaultSize),
    ),
  ),
),

---

 

Card shape

• Card 위젯에서도 동일한 shape property에 똑같이 사용할 수 있다.

Container(
  width: MediaQuery.of(context).size.width * .8,
  child: Card(
    color: Colors.indigo[100],
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(defaultSize),
      side: BorderSide(
        color: Colors.indigo[300],
        width: 1.0,
      ),
    ),
    child: ListTile(
      leading: FractionalTranslation(
          translation: Offset(0.0, 0.1),
          child: Icon(
            Icons.check,
            size: defaultSize * 1.5,
          )),
      title: Text(
        '오늘 할일',
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: defaultSize),
      ),
      subtitle: Text(
        '블로그에 글 쓰기',
        style: TextStyle(fontSize: defaultSize),
      ),
      trailing: Icon(Icons.check_box_outline_blank),
    ),
  ),
),

 

---

• Container의 [decoration: BoxDecoration]에도 shape property가 있지만 이것과 Chip, Card의 shape는 다르다.