Flutter layout practice/플러터 레이아웃 연습

 

medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Flutter Layout Cheat Sheet

 

그림으로 직관적으로 알아 볼 수 있게 해줌

코드도 있어서 붙여넣기로 실습해 볼 수 있음.

 

 

mainAxisSize property

Row and Column occupy different main axes. A Row’s main axis is horizontal, and a Column’s main axis is vertical. The mainAxisSize property determines how much space a Row and Column can occupy on their main axes. The mainAxisSize property has two possible values:

MainAxisSize.maxRow and Column occupy all of the space on their main axes. If the combined width of their children is less than the total space on their main axes, their children are laid out with extra space.MainAxisSize.minRow and Column only occupy enough space on their main axes for their children. Their children are laid out without extra space and at the middle of their main axes.

 

 

 

---

연습

 

 

Row and Column

MainAxisAlignment.start

Positions children near the beginning of the main axis. (Left for Row, top for Column)

- 왼쪽부터 차례대로 (Row)

- 위에서부터 차례대로(Column)

 

 

 

 

Row /*or Column*/( 
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

---

MainAxisAlignment.end

Positions children near the end of the main axis. (Right for Row, bottom for Column)

- 오른쪽부터 차례대로(Row)

- 아래쪽부터 차례대로(Column)

 

 

 

Row /*or Column*/( 
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

---

MainAxisAlignment.spaceBetween

Divides the extra space evenly between children.

- children 사이 여유간격을 일정하게

 

 

 

---

MainAxisAlignment.spaceEvenly

Divides the extra space evenly between children and before and after the children.

- children 앞 뒤 여유 간격을 일정하게

 

---

MainAxisAlignment.spaceAround

Similar to MainAxisAlignment.spaceEvenly, but reduces half of the space before the first child and after the last child to half of the width between the children.

-MainAxisAlignment.spaceEvenly와 비슷하다. 다만, 처음 child의 시작 전 여유부분과 마지막 child의 다음 여유공간이 다른 children 사이의 여유공간의 반이다.