Flutter Constraint 자식 위젯 크기 규칙

 

HTML 같은 마크다운 언어나 안드로이드 개발 시 사용되는 XML로 페이지를 명시하는 경우에는 화면에 표시될 UI의 위치를 어느정도 예측하고 명시할 수 있다. 

그러나 플러터의 레이아웃은 "Constraints Go Down" 이라는 원칙을 따르기에 위젯이 위치할 위치를 직접 명시해 주어야만 한다.

 

#Constraints Go Down

Constraints Go Down 이란? 플러터에서 자식 위젯의 크기는 부모 위젯에 의해서 결정되며, 자식 위젯의 크기가 결정되면 부모 위젯에게 자식의 크기를 명시해 주어야 하는 원칙.

 

다음 코드는 Container Widget의 위치 제약을 별도로 명시해주지 않았기에 좌측 상단에 배치된다.

import 'package:bloggingtest/firstPage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          width: 100.0,
          height: 100.0,
          color: Colors.greenAccent,
        ),
      ),
    ),
  );
}

 

Center Widget 은 가운데 정렬하는 기능을 가지고 있기에 Center의 자식인 Container 위젯은 화면의 가운데 배치된다.

import 'package:bloggingtest/firstPage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.greenAccent,
          ),
        ),
      ),
    ),
  );
}

 

#자식에게 정확한 위치 제약을 걸어주지 않았을 경우

부모 위젯이 Center Widget과 같이 별도의 위치 제약을 가지고 있지 않은 위젯의 경우 화면 전체 사이즈를 차지하게 된다. 

예시로 100 x 100 사이즈 Container 위젯에 50 x 50 사이즈 Container 위젯을 대입해 보았다. 

Container 위젯은 Center 위젯과 같이 위치 제약에 대한 정보를 가지고 있지 않기에 자식 위젯이 부모 위젯을 모두 덮어버린다. 

import 'package:bloggingtest/firstPage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.greenAccent,
            child: Container(
              width: 50.0,
              height: 50.0,
              color: Colors.green,
            ),
          ),
        ),
      ),
    ),
  );
}

 

Column Widget 을 사용해 자식 위젯의 위치를 명시해 주니 자식 위젯의 크기가 제대로 표시된다.

Flutter Row & Column 위젯 총정리

import 'package:bloggingtest/firstPage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.greenAccent,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.green,
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}