[Flutter] 같은 행에 Widget 정렬하기

처음에 접근한 방식은 Row 위젯에 자식 위젯을 두고 적절하게 Center위젯으로 감싸면 될 거라고 생각했는데 안 된다.
Row의 MainAxisAlignment를 center로 바꾸면 처리가 되기는 하는데 각 위젯마다 처리가 안 된다.

 

문제의 코드

Row(
        children: [
          SizedBox(
              width: vocaBottomSheetLoginIconSize,
              height: vocaBottomSheetLoginIconSize,
              child: image),
          Center(
            child: Text(
              strText,
              style: const TextStyle(
                  fontSize: textSize16,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),

 

원하는 처리를 하려면...

원하는 형태

 

1. Row를 Column으로 바꾼다. 
2. 행으로 같이 두고 싶은 위젯을 Stack으로 감싸준다. (stack의 alignment를 center로 설정)
3. 위치를 바꾸고 싶은 위젯을 Align으로 감싸서 alignment를 설정해준다. (centerLeft, center)
4. Padding을 추가하여 적절하게 위치를 맞춰준다.

이렇게 하면 적절하게 같은 행에 Widget을 배치할 수 있다.

 

Column(
        children: [
          const Padding(
              padding: EdgeInsets.only(
                top: 8,
              )),
          Stack(
            alignment: Alignment.center,
            children: [
              Align(
                alignment: Alignment.centerLeft,
                child: SizedBox(
                    width: 35,
                    height: 35,
                    child: image),
              ),
              Align(
                alignment: Alignment.center,
                child: Text(
                  strText,
                  style: const TextStyle(
                      fontSize: 16,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
          const Padding(
              padding: EdgeInsets.only(
                top: 8,
              )),
        ],
      )

간혹 위아래 간격이 안 맞는 경우에는 Padding 처리를 해주자.