[Flutter] Widget / 위젯 - 위치, 정렬, 크기를 위한 위젯

위젯 : 플러터의 UI를 구성하는 모든 요소.

 

위치, 정렬, 크기를 위한 위젯

위젯 중에는 위젯 크기나 위치, 정렬 등을 보조하는 위젯이 있다.

 

 

 

Center

중앙으로 정렬시키는 위젯. 상당히 많이 사용됨.

body: Center(
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
        )

 

+ 참고적으로, 내 예제에서 타이틀이 있다 없다 하는데

타이틀 부분이 없는건 Scaffold에서 appBar 프로퍼티나 body 프로퍼티 사용 안하고 전체 다 사용하게 되었을 때 그런다.

 

---

 

Padding

안쪽 여백을 표현할 때 사용하는 위젯.

body: Padding(
          padding: const EdgeInsets.all(40.0),
          child: Container(color: Colors.red),
        )

앞에 const를 붙이면 컴파일 타임에 상수로 정의되어,

다시 사용되는 부분이 있을 경우 메모리에 있는 값을 재사용하는 이득이 있다.

 

EdgeInsets는 여러 함수를 제공한다.

all() : 네 방향 모두 같은 값을 지정

only() : 상하좌우 중에서 원하는 방향에만 값을 지정. 지정하지 않은 방향은 기본값 0.0

EdgeInsets.only(left: 0)

 

Container의 padding 프로퍼티로 이를 사용해왔던것으로 보아

A. 상속 관계이거나(이게 그것들을 구현시켜주는 근본 뿌리)

B. 좀 다른 방법인듯.

---

 

Align

자식 위젯의 정렬 방향을 정할 수 있는 위젯. 원하는 방향으로 위젯 정렬 시 사용.

body: Align(
          alignment: Alignment.bottomRight,
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,),
        )

 

---

 

Expanded

자식 위젯의 크기를 최대한으로 확장시켜주는 위젯

body: Column(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 1, // 기본값은 1
              child: Container(
                color: Colors.green,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        )

 

---

 

SizedBox

위젯 중에 크기에 관련된 프로퍼티가 없는 위젯이 많다. 그러한 위젯을 특정 크기로 만들고 싶을때 사용한다.

body: SizedBox(
          width: 100,
          height: 100,
          child: Container(
            color: Colors.red,
          ),
        )

 

 

---

 

Card

카드 형태의 모양을 제공하는 위젯. 기본적으로 크기가 0이므로 자식 위젯의 크기에 따라 크기가 결정됨.

body: Center(
          child: Card(
            shape: RoundedRectangleBorder(
              // 경계는 네모모양
              borderRadius: BorderRadius.circular(16.0), // Radius는 16정도로.
            ),
            elevation: 4.0, // 그림자 깊이
            child: Container(
              width: 150,
              height: 150,
            ),
          ),
        )

 

---

 

서적 : 오준석의 플러터 생존코딩