flutter Understanding constraints

flutter로 3~4개의 프로젝트 경험을 쌓아봤다.

해외 소스코드도 구매해서 뜯어도 보고, 전 개발자가 구현한 소스도 보고, 직접 앱 개발도 해보고,

허나 layout구성하는 방법은 다 재각각이었다.

개인적으로, 해외 소스코드도 좋은 편은 아니었다.

layout수정 조금만 하려고 하면 layout errors가 잘 터지고, 결국 세로 다시 쌓는 게 빠를 정도였다..

그에 따른 해결법은 아래의 공식문서를 통해 어느 정도 해결 할 수 있었는데,

https://docs.flutter.dev/testing/common-errors

언제나 그렇듯 이론만 있다고 다 해결되는 경우가 없다 (...ㅋㅋㅋㅋ)

그래서 이번에 flutter layout 관련 문서를 보고, 간단하게 5분 만에 핵심만 집고 갈 수 있게, 글로 남겨보았다.

해당 글을 보고 필요성을 느끼면 공식문서를 꼭 보는 걸 추천한다.

 

layout 규칙

flutter의 layout 규칙은 3가지만 기억하면 된다.

Constraints go down. Sizes go up. Parent sets position.

 

이를 풀어보자면, 

Constraints(제약 조건) > 위젯이 가질 수 있는 크기의 한계치라고 보면 된다.

Constraints는 상위 위젯에서 하위 위젯으로 내려간다.

즉, 상위 위젯보다 커질 수 없다라고 생각하면 된다.

 

Sizes는 크기를 뜻하는데, 이는 하위 위젯이 상위위젯한테 Sizes를 알려준다고 생각하면 된다.

Constraint와 연계해서 보면,  Constraint는 크기가 아니다, "한계치"라고 생각하면 편하다.

이를 Sizes와 비교하여 "한계치"를 넘었는지 안 넘었는지를 판단하여 layout errors를 일으킨다고 보면 된다.

 

Parant sets Position > 상위 위젯이 Constraints와 Sizes를 비교하여 layout 맞으면, 그때 위치를 상위 위젯에서 정한다고 생각하면 된다.

 

flutter에서 Column, Row, Container를 중첩으로 여러 번 써본 경험이 있다면, 어느 정도 이해 할 수 있을 것이다.

 

예시로 보는 layout이해

 

1.  Container만 띄우기

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

Container 부모는 Screen이고, Screen은 Container의 Sizes를 화면을 꽉 채우게 강제합니다.

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 100,
      height: 100,
    );
  }
}

이는 Sizes를 명시해 줘도 똑같이 동작합니다.

이유로는, Screen은 화면을 꽉 채우도록 동작하기 때문입니다.

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    );
  }
}

이를 화면을 꽉 채우도록 동작하게 하지 않으려면. 상위 위젯을 하나 두면 됩니다.

하나 여기서 알고 넘어갈 점은 Center는 Screen의 영향을 받아 화면의 모든 공간을 차지고 하고 있습니다.

 

layout 규칙을 기반으로 설명하면,

Container입장에서는 제약조건은 Center에서 받아왔고, Center의 제약조건은 Screen의 모든 공간 차지입니다.

그다음 Container의 sizes를 Center한테 전달하고, Center가 sizes 기반으로 position을 잡아준 것입니다.

 

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 70,
          minHeight: 70,
          maxWidth: 150,
          maxHeight: 150,
        ),
        child: Container(color: Colors.red, width: 1000, height: 1000),
      ),
    );
  }
}

여기서 ConstrainedBox로 하위 위젯의 Constraints(제약조건)만 제공하는 방법도 있습니다.

이렇게 하면 Container의 sizes를 아무리 크게 해도,  Constraints 이상의 sizes를 확보할 수 없습니다.

 

 

 

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    const red = Colors.red;
    return UnconstrainedBox(
      child: Container(color: red, width: 4000, height: 50),
    );
  }
}

 

위처럼 constraints를 제약을 푸는 방법도 있습니다.

 

 

 

 

 

 

끝 맺음.

해당 글로 Flutter layout 규칙을 간단하게라도 알고 갔으면 합니다.

좀 더 자세한 내용은 공식문서에서,,

https://docs.flutter.dev/ui/layout/constraints

 

Understanding constraints