[Flutter] 플러터 버튼 종류

[Flutter] 플러터 버튼의 종류(4가지)

아래 코드로 구현한 flutter 버튼

class MyHomePage extends StatelessWidget { 
  final String title; //화면상단에 표시될 제목. final이 붙어 더이상 변경되지 않는다.
  MyHomePage({required this.title}); //required: 꼭 선언해주어야 하는 값

  @override
  Widget build(BuildContext context) {
    return Scaffold( //앱 화면이 기본적으로 갖춘 기능을 선언한 위젯
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(
          title,
          ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(onPressed: (){}, child: Text('TextButton')),
            Padding(padding: EdgeInsets.all(20)),
            ElevatedButton(onPressed: () {}, child: Text('Elevated button')),
            Padding(padding: EdgeInsets.all(20)),
            OutlinedButton(onPressed: (){}, child: Text('outlined button')),
            Padding(padding: EdgeInsets.all(20)),
            IconButton(onPressed: (){}, icon: Icon(Icons.star)),
          ],
          ),
      ),

• TextButton
  • 가장 간단한 형태의 버튼
  • 테두리 없음. 안에 Text 위젯만 존재
• ElevatedButton
  • 배경색이 칠해진 버튼
• OutlinedButton
  • 테두리가 그려져 있는 버튼
• IconButton
  • Icon()을 인자로 받아 아이콘 형태의 버튼 생성

 

oonPressed 프로퍼티

• 버튼이 가진 공통 프로퍼티
• 버튼이 눌렸을 때 수행할 일에 대한 함수를 인자로 받음

반응형

 

---

 

 

flutter의 위젯은 누구나 만들 수 있어 매우 다양

https://pub.dev/에서 확인하거나 flutter 유튜브에서 소개하는 'flutter widget of the week'에서 빠르게 확인 가능

Dart packages

 

유튜브 flutter에서 소개하는 이주의 위젯