<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/Dev/Flutter"><span>Dev/Flutter</span></a></p><h3>[Flutter] Border 테두리 - 라운드 사각형 디자인</h3>
                </div>
                <p><cite>healthyryu</cite>
                  <span> 2022. 12. 7. 23:22</span>
                </p>
                                <div>
                                <p data-ke-size="size16">플러터로 테두리에 라인을 그리는 형태의 박스를 디자인 하기 위해서 <b>Container 위젯</b>을 사용해도 되고, <b>Card 위젯</b>을 사용해서 구현하면 됩니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="보더.png" data-origin-width="48" data-origin-height="42">
    <span data-url="https://blog.kakaocdn.net/dn/lcU5l/btrS3oImjFg/b9LETSSFRGoQbBnELGi471/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/lcU5l/btrS3oImjFg/b9LETSSFRGoQbBnELGi471/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="보더.png" data-origin-width="48" data-origin-height="42">
    </span>
    
</figure>
<pre id="code_1670422809818" data-ke-language="java" data-ke-type="codeblock"><code>Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      color: Colors.white,
      border: Border.all(color: color),
    ),
  padding: const EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 4),
    child: item,
)</code></pre>
<pre id="code_1670422457183" data-ke-language="java" data-ke-type="codeblock"><code>Card(
    elevation: 0,
    margin: EdgeInsets.zero,
    shape: RoundedRectangleBorder(
        side: BorderSide(color: color),
        borderRadius: const BorderRadius.all(Radius.circular(6))),
    child: Container(
      margin: const EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 4),
      child: item,
    )
)</code></pre>

            
            
                </div>
                

              </article></div>

대부류 - [Dev u Ryu]

류지훈

플러터로 테두리에 라인을 그리는 형태의 박스를 디자인 하기 위해서 Container 위젯을 사용해도 되고, Card 위젯을 사용해서 구현하면 됩니다.
Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      color: Colors.white,
      border: Border.all(color: color),
    ),
  padding: const EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 4),
    child: item,
)
Card(
    elevation: 0,
    margin: EdgeInsets.zero,
    shape: RoundedRectangleBorder(
        side: BorderSide(color: color),
        borderRadius: const BorderRadius.all(Radius.circular(6))),
    child: Container(
      margin: const EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 4),
      child: item,
    )
)

[Flutter] Border 테두리 - 라운드 사각형 디자인

댓글