Flutter 레아이웃 기초 강좌 mainAxisAlignment 정렬 명령어

저번 Column와 Row에 이어서 이번엔 mainAxisAlignment를 이용한 레이아웃 정렬 방법에 대해서 써보겠습니다.

 

먼저 저번 코드를 참고에서 코드를 짜 보겠습니다. 

 

*Row와 Column함수를 모른다면 해당 링크 이동↓

https://for-it-study.tistory.com/12

Flutter 레이아웃기초 강좌 Row와 Column

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mainAxisAlignment')
      ),
      body: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Square(),
            Square(),
            Square(),

          ],

        ),
      ),
    );
  }
}

class Square extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(),
      ),
    );
  }
}

저번과 마찬가지로 다른 코드들은 제쳐두고 

mainAxisAlignment: MainAxisAlignment.'원하는 정렬 명령어'의 구조는 Row안에 있으므로

Row안에 있는 것들을 정렬해줍니다. 제가 친 명령어는 center이기 때문에 Row안에 있는 Square들을 

다음과 같이 중간에 위차하도록 정렬해줍니다.

cneter 말고도 다양한 정렬 명령어가 잇는데 한번 알아보겠습니다.

 

mainAxisAlignment에 쓸 수 있는 정렬 명령어 종류

-MainAxisAlignment.center

 

1.MainAxisAlignment.start: Row 첫 부분부터 차례로 정렬

 

2.MainAxisAlignment.end: Row 끝 부분에 정렬

 

3.MainAxisAlignment.spaceBetween: 믈체 사이를 균등하게 띄워주면서 정렬

 

4.MainAxisAlignment.spaceEvenly: 물체 전후에 균등하게 공간을 나눠주면서 정렬

 

5.MainAxisAlignment.spaceAround: 물체를 사이를 균등하게 정렬해주고 첫 번째 물체 전과 마지막

                                            물체 후의 공간만 물체 사이 공간의 반만큼 띄워준다. 

이처럼 mainAxisAlignment: MainAxisAlignment.'원하는 명령어'로 물체를 다양하게 배치할 수 있습니다.