플러터(flutter) - Row 가로 정렬 방법 (MainAxisAlignment)

Row 위젯에서 가로 정렬을 할 때는 mainAxisAlignment 인자를 이용한다.

      

      

      

    
    

      <java />
    
// 예시
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  ...
);

 

1. MainAxisAlignment.start

child 위젯을 왼쪽에 붙게한다.

      

      

      

    
    

      <java />
    
import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Row 위젯 예시",
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start, // 왼쪽 정렬
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.start

 

2. MainAxisAlignment.center

child 위젯을 가운데로 정렬한다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center, // 가운데 정렬
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.center

 

3. MainAxisAlignment.end

child 위젯을 오른쪽에 붙게 한다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end, // 오른쪽 정렬
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.end

 

 

4. MainAxisAlignment.spaceEvenly

child 위젯 간의 공간을 두고, 같은 크기만큼 양 옆에 공간을 둔다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 같은 간격만큼 공간을 둠
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.spaceEvenly

 

 

5. MainAxisAlignment.spaceAround

spaceEvenly와 비슷하지만, child 위젯간의 공간을 두고, 절반 크기만큼 양 옆에 공간을 둔다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          // 각 위젯끼리 공간을 둠
          // 양 끝에 절반 크기만큼 여백을 둠 (spaceEvenly 와의 차이점)
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.spaceAround

 

 

6. MainAxisAlignment.spaceBetween

child 위젯간의 공간을 두지만, spaceEvenly와 spaceAround와는 다르게 양 옆에 공간을 만들지 않는다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 각 위젯간의 공간을 둠
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("Container2"),
            ),
          ],
        ),
      ),
    );
  }
}

MainAxisAlignment.spaceBetween

 

---

7. 다른 글

2021/01/03 - [Flutter] - 플러터(flutter) - Row 세로 정렬 방법 (CrossAxisAlignment)

플러터(flutter) - Row 세로 정렬 방법 (CrossAxisAlignment)

2021/01/03 - [Flutter] - 플러터(flutter) - Column 가로 정렬 방법 (CrossAxisAlignment)

플러터(flutter) - Column 가로 정렬 방법 (CrossAxisAlignment)