[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (2) 복수 위젯담는 박스

들어가기 앞서...

이전 게시글에는 단일 컨테이너만을 사용해서 플러터 앱을 실행을 했는데, 복수 위젯을 담는 컨테이너를 작성해줄 예정이다.

1. 주의 깊게 봐야하는 점...

1. Column (열, 세로축)
2. Row (행, 가로축)
3. Wrap (childerne 의 공간이 부족해지면, 자동으로 다음줄로 바꿔준다.)
4. Stack (children 의 위젯들을 겹쳐서 출력한다)

---

본문으로...

1.  Column 실습!

body: Column(
  children: [
    Container(
      color: Colors.red,
      width: 150,
      height: 300,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.yellow,
      width: 150,
      height: 300,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.green,
      width: 150,
      height: 300,
      child: const Text(
        '3',
      ),
    ),
  ],
),

 

 

2. mainAxisSize

mainAxisSize: MainAxisSize.min,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. mainAxisAlignment

mainAxisAlignment:MainAxisAlignment.center,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. Row

body: Row(
  children: [
    Container(
      color: Colors.red,
      width: 150,
      height: 300,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.yellow,
      width: 150,
      height: 300,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.green,
      width: 150,
      height: 300,
      child: const Text(
        '3',
      ),
    ),
  ],
),

 

5. mainAxisSize

mainAxisSize: MainAxisSize.min,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. mainAxisAlignment

mainAxisAlignment: MainAxisAlignment.center,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. Wrap

overflow 났을 경우, 다음줄로 내리고 싶을때 Wrap 위젯을 사용한다.

children의 공간이 부족해지면 자동으로 다음줄로 바꿔준다.

body: Wrap(
	// direction: Axis.vertical,
	children: [
	  Container(
	    color: Colors.red,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '1',
	    ),
	  ),
	  Container(
	    color: Colors.yellow,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '2',
	    ),
	  ),
	  Container(
	    color: Colors.green,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '3',
	    ),
	  ),
	],
	),

 

8. Stack

겹쳐서 위젯을 출력하고 싶을때 Stack 위젯을 사용한다.

children 의 위젯들을 겹쳐서 출력한다.

body: Stack(
  alignment: Alignment.center,
  children: [
    Container(
      color: Colors.red,
      alignment: Alignment.center,
      width: 100,
      height: 200,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.green,
      alignment: Alignment.center,
      width: 100,
      height: 100,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.yellow,
      alignment: Alignment.center,
      width: 100,
      height: 50,
      child: const Text(
        '3',
      ),
    ),
  ],
)

 

---

끝으로...

1. 복수 위젯을 담는 컨테이를 배우고 작성했다!

---