[플러터 위젯] ElevatedButton

 

플러터(Flutter)는 다재다능한 위젯 라이브러리로, 다양한 버튼 옵션을 제공하여 모바일 애플리케이션의 UI를 쉽게 구축할 수 있습니다.
그중에서 엘레베이티드버튼(ElevatedButton)은 자주 사용되는 버튼 중 하나입니다.
이 글에서는 플러터에서 ElevatedButton을 사용하는 방법과 다양한 옵션을 소개하겠습니다.

1. ElevatedButton 소개

ElevatedButton은 플러터에서 사용자가 누를 수 있는 버튼을 만들기 위해 사용되는 위젯입니다. 이는 음영(shadow)과 높이(elevation)를 제공하여 버튼이 배경 위에 떠 있는 것처럼 보이게 합니다.

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('ElevatedButton Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button Pressed');
            },
            child: Text('Elevated Button'),
          ),
        ),
      ),
    );
  }
}

3. ElevatedButton의 다양한 옵션

ElevatedButton은 다양한 속성을 통해 버튼의 스타일을 커스터마이징할 수 있습니다.

3.1 onPressed와 onLongPress

onPressed : 버튼이 눌렸을 때 호출되는 콜백 함수입니다.
onLongPress : 버튼이 길게 눌렸을 때 호출되는 콜백 함수입니다.

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  onLongPress: () {
    print('Button Long Pressed');
  },
  child: Text('Press Me'),
)

3.2 style

`ButtonStyle`을 사용하여 버튼의 외형을 커스터마이징할 수 있습니다.

backgroundColor : 버튼의 배경색을 설정합니다.
foregroundColor : 텍스트와 아이콘의 색을 설정합니다.
elevation : 버튼의 높이를 설정합니다.
padding : 버튼의 패딩을 설정합니다.
shape : 버튼의 모양을 설정합니다.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 배경색
    onPrimary: Colors.white, // 텍스트 색상
    elevation: 5, // 높이
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 패딩
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30), // 둥근 모서리
    ),
  ),
  child: Text('Styled Button'),
)

3.3 icon

아이콘과 텍스트가 함께 있는 버튼을 만들려면 `ElevatedButton.icon`을 사용합니다.

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.thumb_up),
  label: Text('Like'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    onPrimary: Colors.white,
  ),
)

4. 사용 예시

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('ElevatedButton Example')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: Text('Basic Elevated Button'),
              ),
              SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                  onPrimary: Colors.white,
                  elevation: 10,
                  padding: EdgeInsets.all(20),
                ),
                child: Text('Customized Elevated Button'),
              ),
              SizedBox(height: 10),
              ElevatedButton.icon(
                onPressed: () {},
                icon: Icon(Icons.send),
                label: Text('Send'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.purple,
                  onPrimary: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

결론

이 글에서는 플러터의 ElevatedButton에 대해 알아보고, 다양한 옵션을 통해 버튼을 커스터마이징하는 방법을 살펴보았습니다. ElevatedButton은 기본적인 사용법부터 고급 스타일링 옵션까지 제공하여 플러터 애플리케이션의 UI를 더욱 풍부하게 만들어줍니다. 다양한 옵션을 활용하여 여러분의 앱에 맞는 버튼을 디자인해보세요.