ALIOTHX Developers
ALIOTHXMANAGER
  • 😈DEMO App 설치
  • 크로스플랫폼 개발환경
    • ⚙️Flutter 개발환경
    • 🧑‍💻Flutter 시작하기
    • 📲폰에서 실행
    • 개발가이드
    • 🚀솔루션 설치
    • 🚦코드가이드
      • 명명 규칙및 주석처리
      • 코딩 컨벤션
      • 디렉토리 생성및 관리
      • 페이지 작성
    • 🏭Flutter 아키텍쳐
      • 채널링
      • 웹뷰
        • 웹뷰 설정
        • 웹뷰 연동
      • 보안 (Security)
        • 대칭키 암호알고리즘
        • 비대칭키 암호알고리즘
        • 메시지 다이제스트
        • 탈옥및 루팅 탐지및 차단
        • 앱 위/변조 탐지및 차단
        • 코드 난독화
    • 🖥️관리시스템
    • 🎆협업도구
  • UIUX 컴포넌트
    • UI/UX
      • 테마 적용
      • 화면방향전환
      • 토스트 (Toast)
      • 버튼 (Button)
      • 텍스트 (Text)
      • 탭바 (TabBar)
      • 이미지뷰 (ImageView)
      • 카메라/이미지
      • 페이지 트랜지션
      • 입력필드 (TextField)
      • 체크박스 (CheckBox)
      • 라디오버튼 (RadioButton)
      • 로딩바 (Loading Indicator)
      • 바텀시트 (BottomSheet)
      • 리스트뷰 (ListView)
      • 슬리버 (Sliver)
      • 사운드 (Sound)
      • 애니메이션 (Animation)
      • 위치 및 정렬
      • 커스텀 키보드
      • 카드 (Card)
      • 토글 버튼 (Toggle Button)
      • 다이얼로그 (Dialog)
      • QR코드
      • 페이지뷰 (PageView)
  • Common 컴포넌트
    • 공통모듈
      • 데이터통신과 JSON 파싱
      • 인증 연동
      • 채널링
      • 네비게이션
      • 푸시 메시지
      • SMS 인증
      • 예외처리
  • Security 컴포넌트
    • 보안모듈
      • 메시지 다이제스트
      • 암/복호화
  • Option 컴포넌트
    • 옵션모듈
      • 동영상 플레이어
      • 유튜브 연동
      • 차트
      • SNS 공유
      • 지도
      • 로컬 DB
  • 🎁라이센스및 기술지원
  • 🏢고객사
Powered by GitBook
On this page
  1. UIUX 컴포넌트
  2. UI/UX

위치 및 정렬

Flutter에서 위젯을 배치하고 정렬하는 데 중요한 역할을 하는 위치 및 정렬 위젯에 대한 가이드를 제공합니다. 이 예제에서는 Row 및 Column 위젯을 사용하여 다양한 위치 및 정렬 옵션을 시연합니다.

Previous애니메이션 (Animation)Next커스텀 키보드

Last updated 1 year ago

Row 및 Column 위젯

Row와 Column은 자식 위젯을 가로 또는 세로로 배열하기 위해 사용됩니다. 각각은 자식 위젯의 위치 및 정렬을 다루는 매개변수를 가집니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center, // 수평 정렬
  crossAxisAlignment: CrossAxisAlignment.center, // 수직 정렬
  mainAxisSize: MainAxisSize.min, // 주 축 방향의 크기 조절
  children: [
    FlutterLogo(size: 50.0),
    FlutterLogo(size: 100.0),
    FlutterLogo(size: 50.0),
  ],
)

위의 코드에서는 Row 위젯을 사용하여 FlutterLogo 위젯을 가로로 배열하고 있습니다. 다음은 주요 위치 및 정렬 옵션에 대한 설명입니다.

  • mainAxisAlignment: 주 축 (가로 또는 세로)의 정렬 방법을 지정합니다. MainAxisAlignment 열거형을 사용하여 다양한 정렬 옵션을 선택할 수 있습니다. 예를 들어 MainAxisAlignment.center는 중앙 정렬을 의미합니다.

  • crossAxisAlignment: 주 축과 직각인 방향 (가로 또는 세로)의 정렬 방법을 지정합니다. CrossAxisAlignment 열거형을 사용하여 다양한 정렬 옵션을 선택할 수 있습니다. 예를 들어 CrossAxisAlignment.start는 시작 부분 정렬을 의미합니다.

  • mainAxisSize: 주 축 방향으로 위젯의 크기를 어떻게 조절할지 지정합니다. MainAxisSize.min은 자식 위젯들의 최소 크기로 설정하고 MainAxisSize.max는 최대 가능한 크기로 설정합니다.

위치 및 정렬을 변경하려면 위젯의 상태를 업데이트하고 setState를 호출하여 화면을 다시 빌드합니다.

이것은 간단한 예제이며 Flutter에서 제공하는 위치 및 정렬 위젯은 더 다양하고 복잡한 레이아웃을 구현하는 데 사용됩니다. 위치 및 정렬을 조절하여 사용자 인터페이스를 원하는 대로 구성할 수 있습니다.

Page cover image