플러터 시작하기 05. 버튼 종류를 알아보자!

버튼이 없는 앱을 찾는 것은 사막에서 바늘 찾기나 다름없습니다. 어떤 액션을 취하기 위해서는 버튼을 클릭하는 행동이 필요합니다. 버튼은 어떤 용도로 사용되는지에 따라서 디자인도 다양하게 있죠. 플러터에는 자주 사용하는 5 가지의 버튼 스타일이 있습니다. 이번 포스트에서는 TextButton OutlinedButton FilledButton ElevatedButton 그리고 IconButton에 대해서 알아보도록 하겠습니다.

---

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

플러터 시작하기 04. FloatingActionButton 꾸미기

---

TextButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: TextButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

첫 번째 버튼 스타일은 TextButton 스타일입니다. 아래 이미지처럼 테두리나 배경 색 없이 텍스트로만 이루어진 버튼입니다. 텍스트를 클릭했을 때 버튼을 클릭한 효과를 줍니다. 

OutlinedButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: OutlinedButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

두 번째 버튼 스타일은 OutlinedButton 스타일입니다. 텍스트 버튼에서 테두리가 추가된 버튼이라고 보시면 됩니다. 

FilledButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: FilledButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

세 번째 버튼 스타일은 FilledButton 스타일입니다. 배경 색을 입힌 버튼이라고 보시면 됩니다. 

ElevatedButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: ElevatedButton(
            onPressed: _add,
            child: const Text('Click me!'),
        ),
    ),
);

네 번째 버튼 스타일은 ElevatedButton 버튼 스타일입니다. Scaffold를 배울 때도 elevation 속성이 자주 등장했었는데요, 그림자를 입혀서 공중에 떠 있는 효과를 내는 속성입니다. ElevatedButton도 마찬가지로 그림자 효과를 통해 화면에서 떠 있는 효과를 가진 버튼이라고 보시면 됩니다. 

IconButton 스타일

Scaffold(
    appBar: AppBar(title: const Text('Button Examples')),
    body: Center(
        child: IconButton(
            onPressed: _add,
            icon: const Icon(Icons.add_circle),
        ),
    ),
);

마지막 버튼 스타일은 아이콘을 사용하는 IconButton 스타일입니다. 기존의 버튼과는 달리 child로 위젯을 받는 것이 아니라 icon 속성을 통해 아이콘을 바로 입력받습니다.

버튼 클릭 구현하기

class ButtonExamples extends StatefulWidget {
  const ButtonExamples({super.key});

  @override
  State<ButtonExamples> createState() => _ButtonExamplesState();
}

class _ButtonExamplesState extends State<ButtonExamples> {
  int _count = 0; // 증가하는 값을 저장하는 변수

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Button Examples')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_count', style: const TextStyle(fontSize: 24)),
            OutlinedButton(
              onPressed: _add,
              child: const Text('Click me!'),
            ),
          ],
        ),
      ),
    );
  }

  /// _count를 1씩 증가시키는 함수
  void _add() {
    setState(() {
      _count += 1;
    });
  }
}

버튼을 만들었으면 버튼 클릭도 구현해 봐야겠죠! 간단하게 버튼을 클릭할 때마다 값을 1씩 증가시키도록 만들어 봅시다. 우선 값을 저장할 _count 변수를 하나 만들어 주고요, 1씩 증가시키는 함수 _add()도 만들어 주겠습니다. _counter 값이 증가할 때마다 화면에 출력되기 위해서는 변수가 변경됐으니 화면을 재구성하라는 신호가 필요합니다. 이 신호를 보내주는 역할을 setState가 담당합니다. 

이번 포스트에서는 플러터에서 제공하는 기본적인 버튼 5가지를 소개해드렸습니다. 버튼들은 style 속성으로 색이나 그림자 등을 꾸밀 수 있는데요, 다음 포스트에서 더 자세하게 알려드리도록 하겠습니다. 

---