Expanded vs SpaceAround 차이점

하나의 Row나 Column위젯에서 두개 이상의 버튼이나 이미지를 정렬을 하고 싶을 때 두가지 방법을 쓸 수 있다.
결론부터 말하자면 아이콘의 정렬위치는 같으나 차지하는 크기가 달라진다. 즉 클릭할 수 있는 범위가 달라진다. 아래의 코드와 사진 참조.

1. 각각에 Expanded를 주거나

Row(
                children: [
                  Expanded(
                    child: IconButton(
                        icon: ImageIcon(
                          AssetImage('assets/images/grid.png'),
                          color: Colors.black38,
                        ),
                        onPressed: null),
                  ),
                  Expanded(
                    child: IconButton(
                        icon: ImageIcon(
                          AssetImage('assets/images/saved.png'),
                          color: Colors.black38,
                        ),
                        onPressed: null),
                  )
                ],
              )

2. 각각을 감싸고있는 부모위젯 Row 나 Column의 MainAxisAlignment변경하기.

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                      icon: ImageIcon(
                        AssetImage('assets/images/grid.png'),
                        color: Colors.black38,
                      ),
                      onPressed: null),
                  IconButton(
                      icon: ImageIcon(
                        AssetImage('assets/images/saved.png'),
                        color: Colors.black38,
                      ),
                      onPressed: null)
                ],
              )