반응형
1. 용도
Flutter의 alignment는 container와 같은 widget을 특정 위치에 배치할때 사용된다.
2. 사용법
|
1
2
|
child: Container(
alignment: Alignment(0.0, 0.0), // 이 widget은 가운데 위치하게 됨
|
cs |
가운데를 중심으로 x값 -1.0(왼쪽) ~ 1.0(오른쪽) y값 -1.0(왼쪽) ~ 1.0(오른쪽) 으로 구현
또는 주어져있는 방식을 활용할 수도 있는데 예시는 다음과 같다.
|
1
2
|
child: Container(
alignment: Alignment.center, // 이 widget은 가운데 위치하게 됨
|
cs |
그 외에도
Alignment.topCenter 위쪽 중앙 Alignment(0.0, -1.0)
Alignment.topLeft 왼쪽 위 Alignment(-1.0, -1.0)
Alignment.topRight 오른쪽 위 Alignment(1.0, -1.0)
Alignment.bottomCenter 아래쪽 중앙 Alignment(0.0, 1.0)
Alignment.bottomLeft 왼쪽 아래 Alignment(-1.0, 1.0)
Alignment.bottomRight 오른쪽 아래 Alignment(1.0, 1.0)
Alignment.center 가운데 Alignment(0.0, 0.0)
Alignment.centerLeft 왼쪽 중앙 Alignment(-1.0, 0.0)
Alignment.centerRight 오른쪽 중앙 Alignment(1.0, 0.0)
3. 주의점
단 이 Alignment는 Row나 Column, Stack과 같이 children을 가지고 있는 Widget들에게는 통하지 않는다.
특히 Row와 Column의 경우, 그 내부의 Container에게도 사용할 수 없다.
(이것을 이용해서 배치할거면 Stack을 활용해야 한다.)
반응형
'Flutter' 카테고리의 다른 글
| Flutter material app, Navigator snack bar 안나옴. (0) | 2021.09.08 |
|---|---|
| flutter expanded 사용법 (0) | 2021.09.07 |
| Flutter 기본 코드(심화편) (0) | 2021.09.03 |
| flutter DateTime사용법 (0) | 2021.09.01 |
| Flutter firestore database 존재성, 데이터 가져오기 (0) | 2021.08.30 |