[Flutter] Align 위젯

 

Align

 

자식 위젯을 원하는 방향으로 정리하고 싶을 때 Align 위젯을 사용하여 정렬할 수 있다.

 

다른 위젯과 마찬가지로, 자식 위젯을 Align으로 감싼 뒤 alignment 프로퍼티를 이용하여 방향을 설정해주면 된다.

Align(
        alignment: Alignment.bottomCenter,	//정렬하고자하는 위치 설정
      child:Container(
        //자식 위젯 코드 생략
      )
)

 

---

 

 

Alignment

Alignment 상수는 두 가지 방법으로 설정할 수 있는데,

첫 번째는 Alignment(double x, double y) 함수를 이용하여 직접 위치를 지정해주는 것이고,

두 번째는 미리 정의된 상수 이름을 사용하여 위치를 지정해주는 방법이다.

 

 

 

1. 값 직접 설정

 

Alignment()를 사용하여 함수 위치를 지정할 때는 아래 그래프에 따라 위치를 조정하면 되는데, 소수점 단위로 설정이 가능하다.

표현 할 수 있는 범위는 x 와 y좌표 모두 -1.0 ~ 1.0 사이이다.

 

 

가령 아래와 같이 설정한다면,

Align(
  alignment: Alignment(0.5,-0.75),
child:Container(
  color: Colors.red,
  width: 100,
  height: 100,
)
)

 

자식 위젯의 위치는 아래와 같다고 예상 할 수 있으며 실제 실행 결과도 이와 동일 한 것을 알 수 있다.

 

 

 

 

하지만 이렇게 일일히 값을 지정해준다면 가독성이 떨어질 뿐만 아니라 x와 y좌표의 위치 또한 일반적인 그래프와 다르기 때문에 혼동을 야기할 수 있다.

 

 

 

2. 상수 이름으로 지정

 

때문에 flutter에서는 미리 값을 상수 이름으로 지정하여 사용할 수 있도록 미리 이름을 정의해두었으며, 상수 이름에 따라 다음과 같은 위치를 가진다.

 

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

 

이렇게 상수 이름을 통해 지정할 경우, 위치를 미세하게 조정하는 것은 힘들지만 위치를 이름으로 명확히 파악 가능해진다는 장점이 있다.

 

상수 이름	상수	설명
bottomLeft	Alignment(-1.0, 1.0)	하단 왼쪽
bottomCenter	Alignment(0.0, 1.0)	하단 중앙
bottomRight	Alignment(1.0, 1.0)	하단 오른쪽
centerLeft	Alignment(-1.0, 0.0)	중단 왼쪽
center	Alignment(0.0, 0.0)	중단 중앙
centerRight	Alignment(1.0, 0.0)	중단 오른쪽
topLeft	Alignment(-1.0, -1.0)	상단 왼쪽
topCenter	Alignment(0.0, -1.0)	상단 중앙
topRight	Alignment(1.0, -1.0)	상단 오른쪽

 

 

[실행 결과]