<div id="readability-page-1" class="page"><div>
 <a href="/m/category/Flutter">Flutter</a><h3>Layouts in Flutter 정리 (2)</h3>
 </div><cite>Berno</cite>
 2022. 3. 30. 20:23
 <div>
 저번 글에 이어서 정리를 시작합니다.

<h3 data-ke-size="size23">Nesting rows and columns</h3>

layout 프레임워크는 row와 column이 사용자가 원하는 만큽 중첩해서 사용할 수 있습니다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="663" data-origin-height="296">
 
 <img src="https://k.kakaocdn.net/dn/boFkDL/btrx185qe5Z/UGhuO21mpqtdnYNpj2chgK/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-origin-width="663" data-origin-height="296">
 
 
</figure>
이 이미지에서 저기 빨간색 박스를 친 부분은 2개의 row로 구현되어있습니다. 아래 UI Tree를 확인하시죠.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="400" data-origin-height="333">
 
 <img src="https://k.kakaocdn.net/dn/xy6y6/btrx18K57PO/aTWxxqJrKm10Q5hlj18YWK/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-origin-width="400" data-origin-height="333">
 
 
</figure>
ratings(평점) 변수 부분은 5개의 작은 별 아이콘으로 구성되어 있습니다.
<pre id="code_1648638921656" data-ke-language="java" data-ke-type="codeblock"><code>var stars = Row(
 mainAxisSize: MainAxisSize.min,
 children: [
 Icon(Icons.star, color: Colors.green[500]),
 Icon(Icons.star, color: Colors.green[500]),
 Icon(Icons.star, color: Colors.green[500]),
 const Icon(Icons.star, color: Colors.black),
 const Icon(Icons.star, color: Colors.black),
 ],
);

final ratings = Container(
 padding: const EdgeInsets.all(20),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
 stars,
 const Text(
 '170 Reviews',
 style: TextStyle(
 color: Colors.black,
 fontWeight: FontWeight.w800,
 fontFamily: 'Roboto',
 letterSpacing: 0.5,
 fontSize: 20,
 ),
 ),
 ],
 ),
);</code></pre>
그리고 평점 및에 icon들이 있는데 그것은 이렇게 구성되어 있습니다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="800" data-origin-height="365">
 
 <img src="https://k.kakaocdn.net/dn/bAshoG/btrx0766LkK/mPsVhmPRlorHdPqmRP1U20/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';" width="730" height="333" data-origin-width="800" data-origin-height="365">
 
 
</figure>

iconList 변수는 이렇게 정의되어 있습니다.
<pre id="code_1648638991570" data-ke-language="java" data-ke-type="codeblock"><code>const descTextStyle = TextStyle(
 color: Colors.black,
 fontWeight: FontWeight.w800,
 fontFamily: 'Roboto',
 letterSpacing: 0.5,
 fontSize: 18,
 height: 2,
);

// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
 style: descTextStyle,
 child: Container(
 padding: const EdgeInsets.all(20),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: [
 Column(
 children: [
 Icon(Icons.kitchen, color: Colors.green[500]),
 const Text('PREP:'),
 const Text('25 min'),
 ],
 ),
 Column(
 children: [
 Icon(Icons.timer, color: Colors.green[500]),
 const Text('COOK:'),
 const Text('1 hr'),
 ],
 ),
 Column(
 children: [
 Icon(Icons.restaurant, color: Colors.green[500]),
 const Text('FEEDS:'),
 const Text('4-6'),
 ],
 ),
 ],
 ),
 ),
);</code></pre>
그리고 이 모든걸 leftColumn 변수에서 담고 있습니다. 보시면 기사 내용 외에도 ratings와 iconList가 있습니다.
<pre id="code_1648639023764" data-ke-language="java" data-ke-type="codeblock"><code>final leftColumn = Container(
 padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
 child: Column(
 children: [
 titleText,
 subTitle,
 ratings,
 iconList,
 ],
 ),
);</code></pre>
이 leftColumn은 Sizedbox안에 존재합니다. 이러한 중첩된 UI로 위에 있는 이미지가 이루어졌습니다. Image쪽으로 더 알아보려면 다음 링크를 따라가세요. <a href="https://docs.flutter.dev/development/ui/assets-and-images" target="_blank" rel="noopener">https://docs.flutter.dev/development/ui/assets-and-images</a>

<h3 data-ke-size="size23">Common layout widgets</h3>
Flutter는 풍부한 layout widget library를 가지고 있습니다. 여기 가장 일반적으로 사용하는 것들 중 몇개를 소개합니다. 전체 목록에 압도되기 보다는 가능한 한 빨리 만드는 것이 목적입니다. 다른 위젯에 대한 정보는 다음 링크들을 참고하세요.
 <a href="https://api.flutter.dev/index.html" target="_blank" rel="noopener">https://api.flutter.dev/index.html</a>
<a href="https://docs.flutter.dev/development/ui/widgets" target="_blank" rel="noopener">https://docs.flutter.dev/development/ui/widgets</a>
<figure id="og_1648639323974" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Widget catalog" data-og-description="A catalog of some of Flutter's rich set of widgets." data-og-host="docs.flutter.dev" data-og-source-url="https://docs.flutter.dev/development/ui/widgets" data-og-url="https://docs.flutter.dev/development/ui/widgets" data-og-image=""><a href="https://docs.flutter.dev/development/ui/widgets" target="_blank" rel="noopener" data-source-url="https://docs.flutter.dev/development/ui/widgets">

<div>
Widget catalog
A catalog of some of Flutter's rich set of widgets.
docs.flutter.dev
</div>
</a></figure>


그 다음 내용들은 다 참고로 볼만한 내용들이라.. 그냥 직접 원문을 보는 것이 나을 수 있겠다는 생각으로 올리지 않는다.
 
 
 </div></div>

흔한 컴공출신 개발자

bernoyoun

저번 글에 이어서 정리를 시작합니다.
 
Nesting rows and columns
 
layout 프레임워크는 row와 column이 사용자가 원하는 만큽 중첩해서 사용할 수 있습니다.
이 이미지에서 저기 빨간색 박스를 친 부분은 2개의 row로 구현되어있습니다. 아래 UI Tree를 확인하시죠.
ratings(평점) 변수 부분은 5개의 작은 별 아이콘으로 구성되어 있습니다.
var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    const Icon(Icons.star, color: Colors.black),
    const Icon(Icons.star, color: Colors.black),
  ],
);
final ratings = Container(
  padding: const EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      stars,
      const Text(
        '170 Reviews',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20,
        ),
      ),
    ],
  ),
);
그리고 평점 및에 icon들이 있는데 그것은 이렇게 구성되어 있습니다.
 
iconList 변수는 이렇게 정의되어 있습니다.
const descTextStyle = TextStyle(
  color: Colors.black,
  fontWeight: FontWeight.w800,
  fontFamily: 'Roboto',
  letterSpacing: 0.5,
  fontSize: 18,
  height: 2,
);
// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
  style: descTextStyle,
  child: Container(
    padding: const EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [
            Icon(Icons.kitchen, color: Colors.green[500]),
            const Text('PREP:'),
            const Text('25 min'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.timer, color: Colors.green[500]),
            const Text('COOK:'),
            const Text('1 hr'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.restaurant, color: Colors.green[500]),
            const Text('FEEDS:'),
            const Text('4-6'),
          ],
        ),
      ],
    ),
  ),
);
그리고 이 모든걸 leftColumn 변수에서 담고 있습니다. 보시면 기사 내용 외에도 ratings와 iconList가 있습니다.
final leftColumn = Container(
  padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
  child: Column(
    children: [
      titleText,
      subTitle,
      ratings,
      iconList,
    ],
  ),
);
이 leftColumn은 Sizedbox안에 존재합니다. 이러한 중첩된 UI로 위에 있는 이미지가 이루어졌습니다. Image쪽으로 더 알아보려면 다음 링크를 따라가세요. https://docs.flutter.dev/development/ui/assets-and-images
 
Common layout widgets
Flutter는 풍부한 layout widget library를 가지고 있습니다. 여기 가장 일반적으로 사용하는 것들 중 몇개를 소개합니다. 전체 목록에 압도되기 보다는 가능한 한 빨리 만드는 것이 목적입니다. 다른 위젯에 대한 정보는 다음 링크들을 참고하세요.
 https://api.flutter.dev/index.html
https://docs.flutter.dev/development/ui/widgets
 
 
그 다음 내용들은 다 참고로 볼만한 내용들이라.. 그냥 직접 원문을 보는 것이 나을 수 있겠다는 생각으로 올리지 않는다.

Layouts in Flutter 정리 (2)

댓글