[Flutter] TextButton.icon위젯의 아이콘과 텍스트 위치순서

TextButton.icon위젯을 쓰다보면 '아이콘은 항상 왼쪽에, 텍스트는 아이콘의 오른쪽에 위치할 수 밖에 없는건가?' 하는 의문이 든다. 

VSCode에서 해당 위젯의 설명을 보면, 다음과 같이 나와있다.

Create a text button from a pair of widgets that serve as the button's [icon] and [label].

The icon and label are arranged in a row and padded by 8 logical pixels at the ends, with an 8 pixel gap in between

 

 

설명을 보면 왠지 구조적으로 그렇게 설계 된 것 같아 보이는데, 그러면 아이콘-텍스트의 순서가 아니라 텍스트-아이콘의 순서로 쓰고 싶으면 어떻게 하면 될까?

→ Text위젯과 Icon위젯을 Row의 children으로 넣고, 묶인 걸 TextButton의 child로 넣어주면 된다!

return Scaffold(

        backgroundColor: Palette.backgroundColor,

        body: Center(

          child: Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[

              TextButton(

                onPressed: () {

                  // 버튼이 눌렸을 때 수행할 작업

                },

                child: const Row(

                  children: <Widget>[

                    Text('Press Me'), // 텍스트 설정

                    Icon(Icons.add), // 아이콘 설정

                  ],

                ),

              ),

            ],

          ),

        ));

 

끝~