[Flutter 기초] Button 만들기 (ElevatedButton, TextButton, IconButton

Flutter에서 기본적인 Button은 ElevatedButton, TextButton, IconButton이 있다.

 

ElevatedButton & TextButton

이 중 ElevatedButton과 TextButton은 비슷한데, 가장 큰 차이점은 ElevatedButton은 버튼 모양에 그림자가 있다는 것이다. (나머지는 비슷한 거 같다)

 

이 두 위젯은 코드 형태 또한 유사한데, 기본적으로 onPressed와 child 이 두 가지 parameter가 있어야 동작을 한다. 

※ onPressed : 버튼을 누르면 동작하는 내용에 대해서 넣음

ElevatedButton(onPressed: onPressed, child: child) // 기본 꼴
ElevatedButton(onPressed: (){}, child: Text("Elevated Button")) // 예시: 아무 기능없는 버튼

 

 

버튼을 만들면 기본적으로 아래와 같이 둥근 사각형 모양과 보라색 글씨로 버튼이 만들어진다.

 

이 모양이나 색상 등을 바꾸려면 Button의 parameter로 style을 추가하고 원하는 style을 넣어줘야 한다.

자주 쓰는 styleFrom parameters

• minimumSize : 버튼의 크기 지정
• backgroundColor : 버튼의 배경색 지정
• foregroundColor : 버튼 내부 text의 색 지정 (textStyle에서 color 지정하면 반영 안된다)
• textStyle : text의 style 지정

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(300,100), // 버튼 최소 크기: 300,100 (버튼 안의 내용물 크기에 따라 변동 가능)
    backgroundColor: Colors.blue, // 배경색: 파랑
    foregroundColor: Colors.white, // 글자색: 흰색
    textStyle: TextStyle(fontSize: 20) // 글자 size: 20
  ), 
  onPressed: (){},
  child: Text("Elevated Button")
),

---

IconButton

IconButton은 아이콘 모양의 버튼이다.

size 조절은 iconSize parameter 값으로 한다.

IconButton(onPressed: onPressed, icon: icon) // 기본 꼴
IconButton(onPressed: (){}, icon: Icon(Icons.favorite), iconSize: 100) // 예시: 하트 아이콘 버튼