Flutter 요소 정렬 종류

나를 위해 기록하는 Flutter 기초
Row로 배치한 요소들을 가로, 세로축을 기준으로 정렬하는 방법
 
요소 정렬

1. mainAxisAlignment
   1. center
   2. start
   3. end
   4. spaceAround
   5. spaceBetween
   6. spaceEvenly
2. crossAxisAlignment
   1. center
   2. start
   3. end
   4. stretch

---

1. mainAxisAlignment

기준축의 방향으로 정렬

1. center

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 가운데 정렬
• 요소 사이 빈 공간 없이 모든 요소를 붙여 가운데에 출력

출력 화면 확인
 

2. start

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 왼쪽 정렬
• 요소 사이 빈 공간 없이 모든 요소 붙여 왼쪽 끝에 출력

출력 화면 확인
 

3. end

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 오른쪽 정렬
• 요소 사이 빈 공간 없이 모든 요소를 붙여 오른쪽 끝에 출력

출력 화면 확인
 

4. spaceAround

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 각 요소 사이 공간 생성
• 각 요소의 공간 상에서 각 요소 가운데 정렬

출력 화면 확인
 

5. spaceBetween

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 각 요소 사이 공간 균등 분할

출력 화면 확인
 
 

6. spaceEvenly

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container( width: 50, height: 50, color: Colors.red,),
            Container( width: 50, height: 50, color: Colors.yellow,),
            Container( width: 50, height: 50, color: Colors.green,),
          ],
        ),
      )
    );
  }
}

• 각 요소 좌우 공간 균등 분할

출력 화면 확인

---

2. crossAxisAlignment

기준축에 대해 수직 방향으로 정렬

1. center

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: 600,
          height: 600,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container( width: 50, height: 50, color: Colors.red,),
              Container( width: 50, height: 50, color: Colors.yellow,),
              Container( width: 50, height: 50, color: Colors.green,),
            ],
          ),
        )
      )
    );
  }
}

• 세로 방향의 가운데 정렬

출력 화면 확인
 

2. start

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: 600,
          height: 600,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container( width: 50, height: 50, color: Colors.red,),
              Container( width: 50, height: 50, color: Colors.yellow,),
              Container( width: 50, height: 50, color: Colors.green,),
            ],
          ),
        )
      )
    );
  }
}

• 세로축 기준으로 왼쪽 시작점 정렬 (위쪽 정렬)

출력 화면 확인
 

3. end

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: 600,
          height: 600,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container( width: 50, height: 50, color: Colors.red,),
              Container( width: 50, height: 50, color: Colors.yellow,),
              Container( width: 50, height: 50, color: Colors.green,),
            ],
          ),
        )
      )
    );
  }
}

• 세로축 기준 끝점 정렬 (아래쪽 정렬)

출력 화면 확인
 

4. stretch

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: 600,
          height: 600,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container( width: 50, height: 50, color: Colors.red,),
              Container( width: 50, height: 50, color: Colors.yellow,),
              Container( width: 50, height: 50, color: Colors.green,),
            ],
          ),
        )
      )
    );
  }
}

• 세로 방향으로 요소가 가득 차도록 배치

출력 화면 확인
 
 
 
틀린 부분이 있다면 가르쳐주시면 감사하겠습니다.