[flutter] Row 위젯 안에 있는 Text 위젯

<한 줄 요약>

Row 안에 있는 Text는  가로 크기 제한 위젯(SizedBox, Container, Expanded) 으로 감싸야 오버플로우 안남.

---

Text 위젯은 "Text 작성을 위한 위젯" 입니다.

 

Text가 길어지는 경우에는 자동으로 다음 줄로 넘겨서 회면에 텍스트를 띄워줍니다.

 

그러나 Row 위젯안에 들어 있을 때는 오버플로우를 발생시킵니다.

 

아래를 보며 이해해볼게요.

Center(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.orange,
      child: Text(
          "Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello"),
    ),
),

 

중앙 배치를 위해 Center 위젯을 사용했지만 무시하셔도 괜찮습니다.

 

가로 300, 세로 100이고 오렌지색인 Container 안에 Text를 넣어주었습니다.

 

Text의 길이가 길어서 아래처럼 두 줄로 화면에 나오게 됩니다.

 

 

그러나 Container안에 가로로 여러가지 위젯을 배치시키려면 아래처럼 Row 위젯으로 감싸주어야 합니다.

 

Center(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.orange,
      child: Row(
        children: [
          Text(
              "Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello"),
        ],
      ),
    ),
),

 

Container안에서 가로로 위젯을 놓기 위해 Row 위젯을 사용했습니다.

 

현재는 Row안에 Text 위젯 하나만 놓아보도록 하겠습니다.

 

이때는 문제가 발생합니다.

 

 

Row 위젯은 가로로 위젯을 나열하는 역할을 하는데, 부모의 가로가 제한되어 있다고 해도 무시하고 가로로 쭉 나열합니다.

 

다음 줄로 넘기는 성질은 없기에, Text 위젯이 길어지더라도 다음 줄로 넘기지 않는 것입니다.

 

이를 해결하기 위해서는 부모의 가로 안에서 최대한 공간을 차지하도록 하는 Expanded 위젯을 이용할 수 있습니다.

 

아래를 보며 이해해볼게요.

 

Center(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.orange,
      child: Row(
        children: [
          Expanded(
            child: Text(
                "Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello"),
          ),
        ],
      ),
    ),
)

Expanded 위젯으로 감싸주게 되면 Row의 부모만큼의 위젯이 배치됩니다.

 

따라서, Text 위젯의 가로는 부모의 가로 사이즈인 300으로 제한됩니다.

 

문자열이 길어지면 다음 줄에 배치 되는 것이죠.