button 종류/사용법(최신판) (flutter)

 

Flutter 버튼에는 크게 TextButon/ ElevatedButton /OutlinedButton이 존재한다.

(예전 버전에는 각각 FlatButton/ RaisedButton/ OutlineButton)

 

A. 종합적으로 알아야 할점.

1. child와, onPressed는 required이기 때문에 반드시 써줘야 한다. 

2. 예전 버전과 다르게 색상과 같은 design부분은 styleForm을 받아서 한다. 

3. 버튼의 높이나 너비를 지정하기 위해서는 반드시 sizedbox를 활용하여 child로 넣어야 한다. 

4. 버튼은 사방으로 약간의 margin이 기본적으로 존재한다. (2px 정도)

 

SIzedBox에 대해서 궁금하다면 아랫글 참조

Flutter Sizedbox 로 여백 넣기

B. 각 버튼별 기본 코드

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text('hello world'),
      ),
      body:Center(
        child: Column(
          children:[
            TextButton(
              onPressed: () {},
              child: Text("Text BUTTON"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text("Elevated BUTTON"),
            ),
            OutlinedButton(
              onPressed: () {},
              child: Text("Outlined BUTTON"),
            ),
          ],
        ),
      ),
    );
  }
}

각 버튼별로 onPressed와 child만 넣었을때의 코드와 그 결과이다.  이미지에서 볼 수 있듯이, TextButton은 Text만 나오고, ElevatedButton은 배경색이 기본색(버튼 강조), Outlined Button은 가장자리가 존재함을 확인할 수 있다.

이 부분을 제외하고는 버튼의 명칭이 크게 중요치 않다. 

 

C. Button의 활용(Text button으로)

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello world'),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
            TextButton(
              onPressed: () {},
              child: Text("Text BUTTON1"),
            ),
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
            TextButton(
              onPressed: () {},
              child: Text("Text BUTTON2"),
              style: TextButton.styleFrom(
                primary: Colors.red, // foreground
              ),
            ),
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.red, // foreground
                backgroundColor: Colors.yellow,
              ),
              child: Text("Text BUTTON3"),
            ),
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
            TextButton(
              onPressed: () {},
              style: TextButton.styleFrom(
                primary: Colors.red, // foreground
              ),
              child: Text(
                "Text BUTTON4",
                style: TextStyle(color: Colors.green),
              ),
            ),
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
            SizedBox(
              height: 100,
              width: 200,
              child: TextButton(
                onPressed: () {},
                child: Text("Text BUTTON5"),
              ),
            ),
            Container(
              height: 2,
              color: Colors.blue,
            ), //분리되는걸 확인하기 위한 컨테이너
          ],
        ),
      ),
    );
  }
}
 

Text위젯에서의 글자 색 변경이 기본색 변경(primary)보다 우선시 된다는 것을 염두에 둘 필요가 있다.