[Flutter] 버튼 디자인

 

TextButton()

body: SizedBox(
          child: TextButton( // TextButton
              onPressed: () {},
              child: Text('Button',
                  style: TextStyle(
                    fontSize: 30,
                  )))),

- 기본 형식은 위와 같다. 

- onPressed()에는 버튼 클릭시 동작 시키고자 하는 함수명을 넣는다.

- 버튼을 비활성화 시킬 때는 onPressed에 null 값을 넣어준다.

- 버튼의 스타일은 style: ButtonStyle()로 지정해준다.

ElevatedButton()

body: SizedBox(
          child: ElevatedButton( // ElevatedButton
              onPressed: () {},
              child: Text('Button',
                  style: TextStyle(
                    fontSize: 30,
                  )))),

OutlinedButton()

body: SizedBox(
          child: OutlinedButton( // OutlinedButton
              style: ButtonStyle(),
              onPressed: () {},
              child: Text('Button',
                  style: TextStyle(
                    fontSize: 30,
                  )))),

IconButton()

body: SizedBox(
          child: IconButton( // IconButton
        onPressed: () {},
        icon: Icon(Icons.star), // Icon 지정
      )),

 

좌측부터 TextButton(), ElevatedButton(), OutlinedButton(), IconButton()

 

 

ButtonStyle 적용

- Text 위젯에서의 글자 색 변경이 Primary 보다 우선 순위에 있다.

ElevatedButton 스타일(styleFrom)

ElevatedButton(
 onPressed: (){},
 style: ElevatedButton.styleForm(
    
   Primary: Colors.색상, //메인 색상   
   onPrimary: Colors.색상, // 글자 및 애니메이션 색상
   shadowColor: Colors.색상, // 그림자 색상 
   elevation: 숫자 // 입체감
   
   // 텍스트스타일
   textStyle: TextStyle(
   fontWeight: FontWeight.w숫자(100~900) //폰트 굵기
   fontSize: 숫자 //폰트 크기
   padding: EdgeInsets.all(숫자), // 안쪽 패딩(여백)
   
   // 테두리 지정
   side: BorderSide(
   color: Colors.색상, // 테두리 색상
   width: 숫자, // 테두리 두께
  )
)
)

 

OutlinedButton, TextButton 스타일(styleFrom)

OutlinedButton(
onPressed: (){},
 style: OutlinedButton.styleForm(
   
   Primary: Colors.색상, // 글자, 애니메이션 색상
   backgroundcolor: Colors.색상, // 배경 색상 

   // 텍스트 스타일
   textStyle: TextStyle(
   fontWeight: FontWeight.w숫자(100~900) // 폰트 굵기
   fontSize: 숫자 // 폰트 크기
   padding: EdgeInsets.all(숫자), / 안쪽 패딩(여백)
   
   // 테두리
   side: BorderSide(
   color: Colors.색상, // 테두리 색상
   width: 숫자, // 테두리 두께
  )
)
)