[Flutter] MainAxisAlignment (Axis)

Flutter MainAxisAlignment

 

Flutter의 메인 축을 정렬하는 기능에 대해서 적어보겠습니다.(Axis는 중심선이라는 뜻 입니다.)

 

 

6가지의 함수가 있습니다.

 

MainAxisAlignment.start

MainAxisAlignment.end

MainAxisAlignment.center

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceEvenly

 

이것을 그림으로 나타내자면

 

출처 : https://medium.com/@yubarajpoudel708/spacer-widget-f3bf1e9a4316

 

Start 는 왼쪽 끝, End는 오른쪽 끝, Center는 중간을 뜻합니다.

 

사용은 Row() or Column() 안에서 적어주면 됩니다.

반응형

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

void main() {
  runApp(MyApp());
}
class  MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Scaffold(
          backgroundColor: Colors.teal,
          body: SafeArea(

            child: Row(
              children: <Widget>[
                Container(
                  width: 100,
                  color: Colors.red,
                ),
                Column(
                  mainAxisAlignment:MainAxisAlignment.center ,
                  children:<Widget>[
                    Container(
                      width: 100,
                      height: 100,
                      color: Colors.yellow,
                    ),
                    Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                    )
                  ],
                ),
                Container(
                  width:100,
                  color: Colors.blue,

                )
              ],
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
            )
            ,
          ),
        ),
      ),
    );
  }
}

 

소스코드 출력 값

 

medium.com/flutter-korea/row-column-widgets-8c1ff09a6219 에 들어가면 보다 자세한 Axis를 알 수 있다.