[Flutter] Widget / 위젯 - 버튼 계열 위젯

위젯 : 플러터의 UI를 구성하는 모든 요소.

 

 

버튼 계열 위젯

 

 

ElevatedButton

입체감을 가지는 일반적인 버튼 위젯

body: Center(
          child: ElevatedButton(
            child: Text('RaidsedButton'),
            onPressed: () {},
          ),
        )

버튼 위젯들은 모두 onPressed 프로퍼티에, 버튼이 클릭되었을 때 실행될 함수를 반드시 정의해줘야 버튼이 활성화되며 클릭 가능하다.

만약 null을 지정하면 버튼이 클릭되지 않는 비활성화 상태가 된다.

---

 

TextButton

평평한 형태의 텍스트 버튼

body: Center(
          child: TextButton(
            child: Text('TextButton'),
            onPressed: () {},
          ),
        )

 

---

 

IconButton

아이콘을 표시하는 버튼 위젯.

Center(
          child: IconButton( // 다른 위젯과 다르게 자식 위젯을 포함할 수 없기에 child 프로퍼티가 없다.
            icon: Icon(Icons.add),
            color: Colors.red,
            iconSize: 100.0,
            onPressed: () {},
          ),
        )

다른 위젯과 다르게 자식 위젯을 포함할 수 없어서 child 프로퍼티는 없으며

아이콘을 icon 프로퍼티에 작성하고 크기는 iconSize 프로퍼티로 설정한다.

 

---

 

FloatingActionButton

입체감 있는 둥근 버튼 위젯.

 

Scaffold의 floatingActionButton 프로퍼티에 바로 사용할 수도 있고, 일반적인 버튼처럼 단독 사용할 수도 있다.

body: Center(
          child: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {},
          ),
        )

 

---

 

서적 : 오준석의 플러터 생존코딩