Flutter_04. Button

반응형

다양한 버튼을 사용할 수 있다. 가장 기본적인 TextButton을 입력하면 다음과 같이 출력된다. 쉽게 생각하면, onPressed는 버튼 클릭 시 출력되는 이벤트가 정의되는 부분이고, child는 버튼명을 넣는다고 생각하면 된다.

 

#스타일 : styleFrom()을 사용하여 스타일 설정 가능

style: TextButton.styleFrom()

 

#별도 Function을 만들어서 버튼 클릭 이벤트 구현 가능

  // -- Function ----
  longClickAction() {
    String action = "long clicked";
    print('text button is $action.');
  }

 

 

 

 

 

 

 

TextButton

TextButton(

       style: TextButton.styleFrom(foregroundColor: const Color.fromARGB(255, 79, 54, 244)),

       onLongPress: () => longClickAction(),

       onPressed: () {

           // --- Button Event ---

           print('text button is clicked.');

       },

       child: const Text(

           'Text Button',

           style: TextStyle(fontSize: 20),

       )

),

 

 

 

🌈 Button의 기능이 궁금하다면?

Command를 누른 상태로 해당 버튼을 클릭해보자. 

다음과 같이 해당 버튼에서 사용할 수 있는 기능들을 확인 할 수 있다.

 

 

 

 

 

 

ElevatedButton

ElevatedButton(

       onPressed: (){

           // --- Button Event ---

           print('Elevated button is clicked.');

       },

       style: ElevatedButton.styleFrom(

       backgroundColor: const Color.fromARGB(255, 79, 54, 244),

       shape: RoundedRectangleBorder(

           borderRadius: BorderRadius.circular(10)

           )

       ),

       child: const Text('Elevated button'),

),

 

#style: ElevatedButton.styleFrom()

- 버튼 칼라 backgroundColor: const Color.fromARGB(255, 79, 54, 244),
- 버튼 모양 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10) )

 

 

 

 

 

OutlinedButton

 

OutlinedButton(

       onPressed: (){

           // --- Button Event ---

           print('Outline Button is clicked.');

       },

       style: OutlinedButton.styleFrom(

           foregroundColor: const Color.fromARGB(255, 79, 54, 244),

           side: const BorderSide(

               color: Colors.black,

               width: 2,

           )

       ),

       child: const Text('Outlined button'),

),

 

#style: OutlinedButton.styleFrom()

- 버튼 칼라 backgroundColor: const Color.fromARGB(255, 79, 54, 244),
- 버튼 라인 side: const BorderSide( color: Colors.black, width: 2, )

 

 

 

 

 

 

 

TextButton.icon

 

TextButton.icon(

       onPressed: (){

           // --- Button Event ---

           print("TextButton Icon is clicked.");

       },

       icon: const Icon(

           Icons.home,

           size: 30,

           color: Colors.black,

       ),

       label: const Text("Go to home"),

       style: TextButton.styleFrom(

           foregroundColor: const Color.fromARGB(255, 79, 54, 244)

       ),

),

 

#icon: const Icon()

- 아이콘 이미지 Icons.home,
- 아이콘 사이즈 size: 30,
- 아이콘 칼라 color: Colors.black,

 

#label: const Text()

- 텍스트 버튼명 label: const Text("Go to home"),

 

#style: TextButton.styleFrom()

- 텍스트 버튼 칼라 style: TextButton.styleFrom( foregroundColor: const Color.fromARGB(255, 79, 54, 244) ),

 

 

 

 

 

 

ElevatedButton.icon

 

ElevatedButton.icon(

       onPressed: (){

           // --- Button Event ---

           print("Elevated Button Icon is clicked.");

       },

       icon: const Icon(

           Icons.home,

           size: 20,

       ),

       label: const Text('Home'),

       style: ElevatedButton.styleFrom(

           backgroundColor: const Color.fromARGB(255, 79, 54, 244),

           minimumSize: const Size(130, 40)

       ),

),

 

#style: ElevatedButton.styleFrom()

- 버튼 칼라 backgroundColor: const Color.fromARGB(255, 79, 54, 244),
- 버튼 최소 사이즈 minimumSize: const Size(130, 40)

 

 

 

 

 

 

OutlinedButton.icon

 

 

OutlinedButton.icon(

       onPressed: (){

           // --- Button Event ---

           print("OutlinedButton Icon is clicked.");

       },

       icon: const Icon(

           Icons.home,

           size: 20

       ),

       label: const Text("Go to Home"),

       style: OutlinedButton.styleFrom(

           foregroundColor: Colors.black,

           side: const BorderSide(

               color: Colors.black,

               width: 2,

           )

       ),

)

 

#style: OutlinedButton.styleFrom()

- 버튼 텍스트 칼라 foregroundColor: Colors.black,
- 보더 칼라와 두께 side: const BorderSide( color: Colors.black, width: 2, )

 

 

 

 

 

---

위에 6가지 버튼 코드를 실행하면 다음과 같이 출력된다.

이 기본 코드들을 잘 활용하여 다양한 버튼 스타일을 구현할 수 있다.

 

 

실제로 클릭되는 것을 확인하기 위하여 print를 넣어 확인하자. 하지만! 실제 앱을 올릴때에는 반드시 모든 print를 제거해야 한다고 한다!