[ Flutter ] 버튼 사용하기

Flutter에서 버튼을 사용하는 방법에는 여러 가지가 있습니다. Flutter는 Material Design의 다양한 버튼 위젯을 제공하며, 필요에 따라 커스텀 버튼도 만들 수 있습니다. 주요 버튼 타입과 사용 방법을 하나씩 살펴보겠습니다.

1. 주요 버튼 타입

1. ElevatedButton: 입체적인 스타일의 버튼.
2. TextButton: 텍스트만 있는 평평한 버튼.
3. OutlinedButton: 테두리가 있는 버튼.
4. IconButton: 아이콘만 있는 버튼.
5. FloatingActionButton: 플로팅 액션 버튼, 일반적으로 화면의 중요한 액션을 위해 사용.
6. Custom Button: GestureDetector, Container를 사용하여 만든 버튼

2. 버튼 사용 예제

각 버튼의 사용 방법을 예제 코드와 함께 설명하겠습니다.

• ElevatedButton

ElevatedButton은 입체적인 스타일을 가진 기본 버튼입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Elevated Button Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('ElevatedButton Pressed');
            },
            child: Text('Elevated Button'),
            ),
          ),
        ),
      ),
    );
  }
}

• TextButton

TextButton은 평평한 버튼으로, 텍스트만 표시됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Button Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              print('TextButton Pressed');
            },
            child: Text('Text Button'),
            ),
          ),
        ),
      ),
    );
  }
}

• OutlinedButton

OutlinedButton은 테두리가 있는 버튼으로, 깔끔한 외형을 가지고 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Outlined Button Example'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              print('OutlinedButton Pressed');
            },
            child: Text('Outlined Button'),
            ),
          ),
        ),
      ),
    );
  }
}

• IconButton

IconButton은 아이콘만 있는 버튼으로, 주로 앱 바나 네비게이션 바에서 사용됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Button Example'),
        ),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.thumb_up),
            color: Colors.blue,
            iconSize: 50.0,
            onPressed: () {
              print('IconButton Pressed');
            },
          ),
        ),
      ),
    );
  }
}

• FloatingActionButton

FloatingActionButton은 화면에 떠 있는 동그란 버튼으로, 주로 중요한 액션을 수행할 때 사용됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Floating Action Button Example'),
        ),
        body: Center(
          child: Text('Press the floating button'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('FloatingActionButton Pressed');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.green,
        ),
      ),
    );
  }
}

3. 커스텀 버튼 만들기

기본 제공되는 버튼 외에도 Flutter에서는 GestureDetector나 InkWell 등을 사용하여 원하는 스타일의 커스텀 버튼을 만들 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Button Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Custom Button Pressed');
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                'Custom Button',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 요약

• ElevatedButton: 입체적인 스타일의 기본 버튼.
• TextButton: 텍스트만 있는 평평한 버튼.
• OutlinedButton: 테두리가 있는 버튼.
• IconButton: 아이콘만 있는 버튼.
• FloatingActionButton: 화면에 떠 있는 중요한 액션 버튼.
• 커스텀 버튼: GestureDetector나 InkWell을 사용하여 자유롭게 디자인할 수 있는 버튼.

각 버튼의 사용 방법을 이해하고, 프로젝트의 필요에 따라 적합한 버튼을 선택하여 사용하면 됩니다.