Flutter 버튼 유형 및 기능

안녕하세요, 이번 강의에서는 가장 많이 사용되는 Flutter 버튼 유형과 그 기능에 대해 이야기하겠습니다. Flutter로 애플리케이션을 개발할 때 처음 열 때 나타나는 예제로 시작할 수 있습니다. 버튼을 화면 오른쪽 하단에 배치한 상태에서 클릭할 때 화면 중앙의 숫자를 +1합니다. 실제로 이 예제에서 사용된 버튼 유형은 플로팅 액션 버튼입니다.

플로팅 액션 버튼

Scaffold 에서는 다른 버튼과 달리 본체 외부에서 사용할 수 있습니다. 본문 외부에서 사용할 경우 소문자로 시작하며 위치는 자동으로 화면의 오른쪽 하단 모서리입니다. 예를 들어,

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

본체 내부에서 사용하면 원하는 대로 포지셔닝을 할 수 있습니다. 이번에는 대문자로 시작합니다.

모든 버튼이 단일 위젯을 가질 수 있기 때문에 자식을 사용합니다. 원하는 위젯을 추가할 수 있습니다. 코드를 살펴보고 플로팅 작업 버튼의 기능을 살펴보겠습니다.

floatingActionButton: FloatingActionButton(
  splashColor: Colors.blueAccent,
  backgroundColor: Colors.redAccent,
  onPressed: () {
    debugPrint("Button clicked!");
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

위의 코드를 살펴보면 버튼 위젯 안에 아이콘 위젯이 있음을 알 수 있습니다. backgroundColor로 배경색을 변경할 때 ; 버튼을 누른 상태에서 splashColor로 색상을 결정할 수 있습니다. 툴팁은 우리에게 정보를 주는 부분으로, 버튼을 계속 누르고 있으면 사진에서 보시는 것처럼 잠시 화면에 반영됩니다. onPressed로 클릭 기능을 제공합니다.
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,Scaffold 내부, 본문 외부, 위의 코드 포함; Floating Action Button를 중앙에 배치할 수 있습니다.

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.pinkAccent,
  onPressed: () {
    debugPrint("Button clicked!");
  },
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  tooltip: 'Increment',
  child: const Icon(Icons.insert_emoticon),
)

그렇다면 플로팅 액션 버튼은 항상 둥글까요? 아니요, 그림과 같이 모양으로 원하는 모양을 만들 수 있습니다.

제기 버튼

이 게시물을 내 블로그에서 계속하십시오! Flutter Button Types and Features .