flutter button 주요 버튼 위젯

 

Flutter에서 버튼은 다양한 스타일과 기능을 제공하는 UI 요소로, 사용자와의 상호작용을 위해 사용됩니다.

주요 버튼 위젯으로는 ElevatedButton, TextButton, OutlinedButton, 그리고 IconButton 등이 있습니다.

각 버튼 위젯은 특정 상황에 맞게 사용될 수 있습니다.

 

주요 버튼 위젯

 

1. ElevatedButton

2. TextButton

3. OutlinedButton

4. IconButton

5. FloatingActionButton

 

1. ElevatedButton

 

ElevatedButton은 입체적인 디자인을 가진 버튼으로, 주로 액션을 강조할 때 사용됩니다.

 

주요 속성

 

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: ElevatedButton.styleFrom(
          primary: Colors.blue,
          onPrimary: Colors.white,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

 

2. TextButton

 

TextButton은 텍스트만 있는 버튼으로, 보통 중요하지 않은 액션이나 링크를 나타낼 때 사용됩니다.

 

주요 속성

 

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: TextButton.styleFrom(
          primary: Colors.blue,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

 

3. OutlinedButton

 

OutlinedButton은 테두리가 있는 버튼으로, 보통 중요도가 낮은 액션이나 보조적인 작업을 나타낼 때 사용됩니다.

 

주요 속성

 

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 텍스트).

• style: 버튼의 스타일을 정의합니다.

style: OutlinedButton.styleFrom(
          primary: Colors.blue,
          side: BorderSide(color: Colors.blue),
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        ),

 

 

 

body: Container(
  child: Column(
    children: [
      Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.yellow
          ),
          onPressed: () => print("ElevatedButton"),
          child: const Text("ElevatedButton"),
        ),
      ),
      Center(
        child: TextButton(
          onPressed: () => print("TextButton"),
          child: const Text("TextButton"),
        ),
      ),
      Center(
        child: OutlinedButton(
          onPressed: () => print("OutlinedButton"),
          child: const Text("OutlinedButton"),
        ),
      )
    ],
  ),
)

 

4. IconButton

 

IconButton은 아이콘을 표시하는 버튼으로, 주로 툴바나 내비게이션 바에 사용됩니다.

 

주요 속성

 

• icon: 버튼 내에 표시될 아이콘.

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• tooltip: 버튼에 마우스를 올렸을 때 표시될 툴팁.

IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        print('Search button clicked');
      },
      tooltip: 'Search',
    ),

 

 

5. FloatingActionButton

 

FloatingActionButton은 떠 있는 액션 버튼으로, 화면의 주요 액션을 나타내는 데 사용됩니다.

 

주요 속성

 

• onPressed: 버튼이 클릭되었을 때 실행될 콜백 함수.

• child: 버튼 내에 표시될 위젯 (일반적으로 아이콘).

floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('FloatingActionButton clicked');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),

 

 

 

주요 포인트

 

• ElevatedButton: 입체적이고 주요 액션을 강조하는 버튼입니다.

• TextButton: 텍스트만 있는 버튼으로, 중요하지 않은 액션이나 링크를 나타낼 때 사용합니다.

• OutlinedButton: 테두리가 있는 버튼으로, 보조적인 작업을 나타낼 때 사용됩니다.

• IconButton: 아이콘을 표시하는 버튼으로, 툴바나 내비게이션 바에 사용됩니다.

• FloatingActionButton: 주요 액션을 나타내는 떠 있는 버튼입니다.