Flutter 플러터에서 2개 요소가 있는 행에서 하나의 요소만 가운데로 정렬하는 방법은 무엇인가요?, How to center only one element in a row of 2 elements in flutter

질문

레이아웃에는 한 줄에 두 개의 위젯이 있습니다. 하나는 텍스트이고 다른 하나는 아이콘입니다.

아래에 표시된 것처럼 *은 아이콘을 나타내며, "-"는 한 줄을 나타냅니다:

----------------------------
           텍스트          *  
----------------------------

텍스트를 전체 줄 가운데로 정렬하고, 아이콘을 오른쪽 끝에 위치시키는 방법은 무엇인가요?

답변

주목해야 할 주요한 점은 Stack을 사용하지 않으려면 왼쪽과 오른쪽에 같은 너비를 차지하는 위젯을 제공해야 한다는 것입니다.

이를 위해 Expanded와 Padding을 사용할 것입니다.

Row(
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 32.0),
        child: Text(
          "텍스트",
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Icon(Icons.add, size: 32.0,)
  ],
)

또는 Row의 mainAxisAlignment과 SizedBox를 사용할 수도 있습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    const SizedBox(width: 32.0),
    Text("텍스트"),
    Icon(Icons.add, size: 32.0)
  ],
)

또는 왼쪽에 Expanded와 SizedBox를 사용할 수도 있습니다. 왼쪽의 패딩이나 추가적인 컨테이너는 텍스트가 아이콘에 의해 차지되는 공간을 고려하여 텍스트를 정말로 가운데에 맞추기 위한 것입니다. :)