Flutter] 기본 레이아웃 이해

MainAxisAlignment

Column는 시작점이 왼쪽 상단이 주축이다.

부모 위젯을 아무것도 두지 않은 상태에서 Column의 MainAxisAlignment.start를 하면 레이아웃은 아무것도 변하지 않는다.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            width: 50.0,
            height: 50.0,
            // margin: EdgeInsets.all(100.0),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
          // Text(
          //   '컬럼의 기본 레이아웃 위치.',
          //   style: TextStyle(
          //     fontSize: 20,
          //     fontWeight: FontWeight.bold,
          //   ),
          // )
        ],
      ),
      drawer: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [Text('로우의 기본 레이아웃 위치.')],
      ),
    );
  }
}

1) MainAxisAlignment.center를 하면 가운데로 간다.

2) MainAxisAlignment.end를 하면 왼쪽하단으로 간다.

 

이 패턴을 보면 세로축(컬럼)을 기점으로 위(start), 가운데(center), 아래(end) 이렇게 세 단계로 내려감을 확인을 할 수 있다.

 

다음은 Column의 Space시리즈이다.

종류는 아래와 같다.

 

1. MainAxisAlignment.spaceAround

2. MainAxisAlignment.spaceBetween

3. MainAxisAlignment.spaceEvenly

 

 

MainAxisAlignment.spaceAround

첫번째 자식과 마지막 자식 앞 뒤에 여유 공간을 주고 나머지 자식과 공간의 절반만큼 배치한다.

Around, 주위에 공간을 주고 배치한다.

 

MainAxisAlignment.spaceBetween

첫번째 자식과 마지막 자식을 시작과 끝에 두고 시작과 끝 사이의 나머지 공간을 모두 균일하게 배치한다.

영어의 의미를 보면 Between은 ~사이에라는 것인데 첫 자식과 끝 자식 사이에 두고 배치를 한다고 생각하면 될 것 같다.

 

MainAxisAlignment.spaceEvenly

첫번째 자식과 마지막 자식 사이뿐만 아니라 첫째, 마지막 사이에도 빈 공간을 균등하게 나눠서 배치한다.

Evenly는 균등하게라는 뜻을 갖고 있으니깐 모든 것들을 균등하게 배치한다고 생각하면 될 것 같다.

 

아래는 Flutter의 기본 프로젝트를 생성하고 카운터변수 부분을 수정한 소스이다.

Row와 Column을 변경하면서 테스트하면 될 것 같다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            width: 50.0,
            height: 50.0,
            // margin: EdgeInsets.all(100.0),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
          Container(
            width: 50.0,
            height: 50.0,
            // margin: EdgeInsets.all(100.0),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
            ),
          ),
          Container(
            width: 50.0,
            height: 50.0,
            // margin: EdgeInsets.all(100.0),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.amber,
            ),
          ),
        ],
      ),
      // drawer: Row(
      //   mainAxisAlignment: MainAxisAlignment.start,
      //   children: [Text('로우의 기본 레이아웃 위치.')],
      // ),
    );
  }
}

 

Row 또한 최초의 시작점은 왼쪽 상단이다.

Row의 기준 축은 가운데이다. start, center, end를 순차적으로 하면 위 상단에서 왼쪽(start), 가운데(center), 오른쪽(end) 이렇게 배치되는 모습을 볼 수 있다.

 

추후에 스샷과 함께 올릴 예정이다... (회사에서는 파일업로드 금지이다)

 

CrossAxisAlignment

CrossAxisAlignment는 위에 설명한 것과 반대라고 생각하면 된다.

Column에서 CrossAxisAlignment를 하면 세로를 축으로 가로로 진행한다.

 

그리고 코드를 통해서 알게 됐는데 위젯을 감싸고 있는 곳에 위치 조정을 하는 위젯을 넣었을 경우에는 당연하지만 하위에 있는 위젯도 포함해서 적용이 된다.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        decoration: const BoxDecoration(
          shape: BoxShape.rectangle,
          color: Colors.blue,
        ),
        child: Column(
          // main
          mainAxisAlignment: MainAxisAlignment.center,
          // crossAxisAlignment: CrossAxisAlignment.end,
          children: const [
            Text(
              'zzzzzzzzz',
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
            // Container(
            //   width: 100.0,
            //   height: 100.0,
            //   decoration: const BoxDecoration(
            //     shape: BoxShape.rectangle,
            //     color: Colors.blue,
            //   ),
            //   // margin: EdgeInsets.all(100.0),
            // ),
            // Container(
            //   width: 50.0,
            //   height: 50.0,
            //   // margin: EdgeInsets.all(100.0),
            //   decoration: const BoxDecoration(
            //     shape: BoxShape.circle,
            //     color: Colors.red,
            //   ),
            // ),
            // Container(
            //   width: 50.0,
            //   height: 50.0,
            //   // margin: EdgeInsets.all(100.0),
            //   decoration: const BoxDecoration(
            //     shape: BoxShape.circle,
            //     color: Colors.amber,
            //   ),
            // ),
          ],
        ),
      ),
      // drawer: Row(
      //   mainAxisAlignment: MainAxisAlignment.start,
      //   children: [Text('로우의 기본 레이아웃 위치.')],
      // ),
    );
  }
}

 

 

 

 

 

참고자료

https://medium.com/flutteropen/flutter-widgets-04-row-column-7a9d8062b472

Flutter Widgets 04 | Row & Column

https://beomseok95.tistory.com/310

Flutter - Row,Column정렬하기 (MainAxisAlignment, CrossAxisAlignment)