Flutter - Align 정렬하기

Align 위젯은 이름 그대로 정렬을 도와주는 위젯이다.

사용방법은 아래와 같다.

Align(
              alignment: Alignment.topLeft,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.amber,
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
  )

  Alignment의 9가지 위치로 위치를 조정할 수 있다.

  topLeft,topCenter,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight 총 9가지가 있다.

             Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 150,
                color: Colors.brown,
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                margin: EdgeInsets.only(left: 40,bottom: 150),
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Container(
                margin: EdgeInsets.only(bottom: 200),
                width: 300,
                height: 70,
                color: Colors.blue,
              ),
            )

  위 코드는 또 다른 예제이다.

  margin을 이용하여 위치 조정을 더욱 자세히 가능하다!

 

해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap10/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap10 · land-waters/flutter-study