[Flutter] Widget(3) - Align

Align Widget

• Align 위젯은 자신의 자식요소들을 정렬하고, 자식요소의 크기에 따라 선택적으로 자신의 크기를 조정하는 위젯이다.
• 치수가 제한되고, 너비요소와 높이요소가 null이면 가능한 큰 사이즈로 측정된다.
• 치수가 제한되지 않고 해당 크기 인자가 null이면 해당 치수에서 자식요소의 크기와 일치한다.
• 크기 인자가 null이 아닌 경우에는, 이 위젯의 해당 치수는 자식 치수와 크기 인자의 곱이다.

 

Align Widget 예제

 

다음 예제를 통해 Alignment를 사용하여 Flutter 로고를 배치해보자.

 

우선 Align을 사용하지 않고 컨테이너 내부에 컨테이너를 배치해본다.

 

• 예제

import 'package:flutter/material.dart';

enum Department {
  treasury,
  state,
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Sample()),
    );
  }
}

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orange,
        child: Container(
          width: 50.0,
          height: 50.0,
          color: Colors.blue,
        ),
      ),
    );
  }
}

 

• 실행화면

 

분명 200x200 크기의 오렌지색 컨테이너에 50x50 크기의 파란색 컨테이너를 넣었음에도 불구하고, 파란색 컨테이너가 오렌지색 컨테이너를 덮어버리는 현상이 발생했다. 이것은 자식 컨테이너의 위치가 지정되지 않아 부모요소 만큼 사이즈가 커진 상황으로, 이런 경우에도 Align 위젯을 사용할 수 있다. 

 

Align을 사용하여 다시 코드를 실행해보면

 

• 예제

import 'package:flutter/material.dart';

enum Department {
  treasury,
  state,
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Sample()),
    );
  }
}

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orange,
        child: Align(
          alignment: Alignment.topLeft,
          child: Container(
            width: 50.0,
            height: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

• 실행화면

 

이렇게 파란 컨테이너가 주황 컨테이너 좌측 상단에 잘 위치하는 것을 볼 수 있다.

현재 Align Widget의 alignment 속성이 topleft이기 때문에 파란 컨테이너가 좌측 상단에 위치해 있다. alignment 속성에서는 Alignment클래스의 topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight로 위치를 지정할 수 있다. alignment.dart의 정의를 살펴보면

 

/// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);

  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

 

이렇게 x와 y가 각각 -1에서 1 사이의 값으로 조정되는 것을 알 수 있다. 미세한 조정이 필요한 상황이라면 Alignment(x,y)에 필요한 값을 넣어서 원하는 위치를 만들어 낼 수 있음을 의미한다.

 

• 예제

import 'package:flutter/material.dart';

enum Department {
  treasury,
  state,
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Sample()),
    );
  }
}

class Sample extends StatelessWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orange,
        child: Align(
          alignment: Alignment(-0.6, 0.8),
          child: Container(
            width: 50.0,
            height: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

• 실행화면