Align과 Center

UI를 구성할 때 위젯을 적절한 위치에 배치하는 것은 매우 중요합니다. Flitter에서는 Align과 Center 위젯을 사용하여 자식 위젯을 원하는 위치에 정렬할 수 있습니다.

학습 목표

이 튜토리얼을 완료하면 다음을 할 수 있습니다:

• Center를 사용하여 위젯을 중앙에 배치
• Align을 사용하여 위젯을 원하는 위치에 정렬
• Alignment 상수를 사용하여 다양한 정렬 위치 설정
• 복합 정렬을 통한 복잡한 레이아웃 구성

핵심 개념

Center

Center는 자식 위젯을 부모 위젯의 중앙에 배치하는 가장 간단한 방법입니다. 별도의 설정 없이 자동으로 가로 세로 중앙 정렬을 수행합니다.

Align

Align은 더 세밀한 정렬 제어를 제공합니다. alignment 속성을 통해 자식 위젯을 부모 내에서 원하는 위치에 정확히 배치할 수 있습니다.

Alignment

Alignment는 정렬 위치를 나타내는 상수들을 제공합니다:

• Alignment.topLeft, Alignment.topCenter, Alignment.topRight
• Alignment.centerLeft, Alignment.center, Alignment.centerRight
• Alignment.bottomLeft, Alignment.bottomCenter, Alignment.bottomRight

기본 사용법

Center로 중앙 배치

import { Center, Container, Text } from "@meursyphus/flitter";

const centeredWidget = Center({
  child: Container({
    width: 100,
    height: 50,
    color: '#3B82F6',
    child: Text("중앙 배치")
  })
});

Align으로 위치 지정

import { Align, Alignment, Container, Text } from "@meursyphus/flitter";

const alignedWidget = Align({
  alignment: Alignment.topRight,
  child: Container({
    width: 100,
    height: 50,
    color: '#10B981',
    child: Text("우상단 배치")
  })
});

단계별 실습

1단계: Center 기본 사용

먼저 Center를 사용하여 텍스트를 중앙에 배치해보겠습니다.

import { Container, Center, Text } from "@meursyphus/flitter";

const widget = Container({
  width: 200,
  height: 150,
  color: '#F3F4F6',
  child: Center({
    child: Text("중앙 배치된 텍스트")
  })
});

2단계: Align으로 다양한 위치 배치

이제 Align을 사용하여 다양한 위치에 위젯을 배치해보겠습니다.

import { Container, Align, Alignment, Text } from "@meursyphus/flitter";

const widget = Container({
  width: 300,
  height: 200,
  color: '#F3F4F6',
  child: Align({
    alignment: Alignment.bottomRight,
    child: Container({
      padding: 10,
      color: '#EF4444',
      child: Text("우하단 배치")
    })
  })
});

3단계: 복합 정렬 구성

여러 위젯을 다른 위치에 배치하는 복합 레이아웃을 만들어보겠습니다.

import { Container, Stack, Align, Center, Alignment, Text } from "@meursyphus/flitter";

const widget = Container({
  width: 300,
  height: 200,
  color: '#F3F4F6',
  child: Stack({
    children: [
      Align({
        alignment: Alignment.topLeft,
        child: Container({
          padding: 8,
          color: '#3B82F6',
          child: Text("좌상단")
        })
      }),
      Center({
        child: Container({
          padding: 8,
          color: '#10B981',
          child: Text("중앙")
        })
      }),
      Align({
        alignment: Alignment.bottomRight,
        child: Container({
          padding: 8,
          color: '#F59E0B',
          child: Text("우하단")
        })
      })
    ]
  })
});

연습 문제

문제 1: 제목 중앙 배치

Center를 사용하여 제목을 화면 중앙에 배치하는 위젯을 만들어보세요.

// TODO: Center를 사용하여 제목 중앙 배치
const titleWidget = // 여기에 코드 작성

문제 2: 버튼 우하단 배치

Align을 사용하여 버튼을 컨테이너의 우하단에 배치하는 위젯을 만들어보세요.

// TODO: Align을 사용하여 버튼 우하단 배치
const buttonWidget = // 여기에 코드 작성

문제 3: 다중 정렬 레이아웃

Stack과 Align을 조합하여 로고(좌상단), 제목(중앙), 설정 버튼(우상단)을 배치하는 헤더를 만들어보세요.

// TODO: 다중 정렬 헤더 레이아웃 구현
const headerWidget = // 여기에 코드 작성

예상 결과

이 튜토리얼을 완료하면:

1. 중앙 배치: Center로 위젯이 정확히 중앙에 위치
2. 위치 지정: Align으로 원하는 위치에 정확한 배치
3. 복합 레이아웃: 여러 위젯이 각각 다른 위치에 정렬된 복합 구조

추가 도전

사용자 정의 정렬

Alignment를 직접 생성하여 더 세밀한 위치 제어를 해보세요.

import { Align, Alignment, Container, Text } from "@meursyphus/flitter";

// 사용자 정의 정렬 (-1.0 ~ 1.0 범위)
const customAlignedWidget = Align({
  alignment: new Alignment(0.5, -0.8), // 우측으로 치우치고 상단 근처
  child: Container({
    padding: 10,
    color: '#8B5CF6',
    child: Text("사용자 정의 정렬")
  })
});

반응형 정렬

화면 크기나 조건에 따라 다른 정렬을 적용하는 위젯을 만들어보세요.

import { Container, Align, Center, Alignment, Text } from "@meursyphus/flitter";

class ResponsiveAlignWidget extends StatefulWidget {
  createState() {
    return new ResponsiveAlignWidgetState();
  }
}

class ResponsiveAlignWidgetState extends State<ResponsiveAlignWidget> {
  isLargeScreen = true;
  
  build(context) {
    return Container({
      width: 300,
      height: 200,
      color: '#F3F4F6',
      child: this.isLargeScreen 
        ? Center({
            child: Container({
              padding: 10,
              color: '#06B6D4',
              child: Text("큰 화면: 중앙 배치")
            })
          })
        : Align({
            alignment: Alignment.topLeft,
            child: Container({
              padding: 10,
              color: '#EC4899',
              child: Text("작은 화면: 좌상단 배치")
            })
          })
    });
  }
}

export default function ResponsiveAlignWidget(props) {
  return new ResponsiveAlignWidget(props);
}

애니메이션과 정렬

정렬 위치가 변경되는 애니메이션 효과를 구현해보세요.

import { Container, Align, Alignment, Text, GestureDetector } from "@meursyphus/flitter";

class AnimatedAlignWidget extends StatefulWidget {
  createState() {
    return new AnimatedAlignWidgetState();
  }
}

class AnimatedAlignWidgetState extends State<AnimatedAlignWidget> {
  currentAlignment = Alignment.center;
  
  toggleAlignment() {
    this.setState(() => {
      this.currentAlignment = this.currentAlignment === Alignment.center
        ? Alignment.topRight
        : Alignment.center;
    });
  }
  
  build(context) {
    return Container({
      width: 300,
      height: 200,
      color: '#F3F4F6',
      child: GestureDetector({
        onClick: () => this.toggleAlignment(),
        child: Align({
          alignment: this.currentAlignment,
          child: Container({
            padding: 10,
            color: '#F59E0B',
            child: Text("클릭하면 위치 변경")
          })
        })
      })
    });
  }
}

export default function AnimatedAlignWidget(props) {
  return new AnimatedAlignWidget(props);
}

흔한 실수

1. Center와 Align 혼동

// ❌ 잘못된 예: Center에 alignment 속성 사용
const wrongCenter = Center({
  alignment: Alignment.topLeft, // Center는 alignment 속성이 없음
  child: Text("오류")
});

// ✅ 올바른 예: 목적에 맞는 위젯 사용
const correctAlign = Align({
  alignment: Alignment.topLeft,
  child: Text("정상")
});

const correctCenter = Center({
  child: Text("중앙 배치")
});

2. Alignment 상수 오타

// ❌ 잘못된 예: Alignment 상수 오타
const wrongAlignment = Align({
  alignment: Alignment.topCenter, // 올바른 상수명
  child: Text("정상")
});

const typoAlignment = Align({
  alignment: Alignment.topCentre, // 오타 (영국식 철자)
  child: Text("오류")
});

// ✅ 올바른 예: 정확한 Alignment 상수 사용
const correctAlignment = Align({
  alignment: Alignment.topCenter,
  child: Text("정상")
});

3. Stack 없이 다중 정렬 시도

// ❌ 잘못된 예: Container에 여러 child 배치 시도
const wrongMultiAlign = Container({
  child: [
    Align({ alignment: Alignment.topLeft, child: Text("좌상단") }),
    Align({ alignment: Alignment.bottomRight, child: Text("우하단") })
  ] // Container는 단일 child만 가능
});

// ✅ 올바른 예: Stack을 사용한 다중 정렬
const correctMultiAlign = Stack({
  children: [
    Align({ alignment: Alignment.topLeft, child: Text("좌상단") }),
    Align({ alignment: Alignment.bottomRight, child: Text("우하단") })
  ]
});

4. new Alignment 사용 시 범위 오류

// ❌ 잘못된 예: 범위를 벗어난 값
const outOfRangeAlignment = Align({
  alignment: new Alignment(2.0, 3.0), // -1.0 ~ 1.0 범위 초과
  child: Text("범위 초과")
});

// ✅ 올바른 예: 올바른 범위의 값
const validAlignment = Align({
  alignment: new Alignment(0.8, -0.5), // -1.0 ~ 1.0 범위 내
  child: Text("정상 범위")
});

다음 단계

정렬을 익혔다면 다음 단계로 진행하세요:

1. Interactive Widgets: 사용자 상호작용을 처리하는 위젯들
2. GestureDetector: 터치와 마우스 이벤트 처리
3. Animation: 위젯의 동적 변화와 애니메이션

이제 Align과 Center를 사용하여 위젯을 원하는 위치에 정확하게 배치할 수 있습니다!