Flutter에서 그라디언트 버튼(Gradient Button) 만들기

Flutter에서는 **그라디언트 버튼(Gradient Button)**을 사용하여 버튼에 스타일을 더하고, 사용자 인터페이스를 더욱 세련되게 만들 수 있습니다. 기본 버튼 스타일을 벗어나 다양한 색상이 섞인 그라디언트 배경을 가진 버튼은 눈길을 끌며, 더욱 인터랙티브한 UI를 제공합니다. 이번 글에서는 Flutter에서 그라디언트 버튼을 만드는 다양한 방법과 관련 예제를 소개하겠습니다.

1. Container와 Ink를 사용한 그라디언트 버튼 만들기

가장 간단하게 Flutter에서 그라디언트 버튼을 만들 수 있는 방법은 Container와 Ink 위젯을 사용하는 것입니다. 버튼의 배경에 그라디언트를 적용하고, 터치 시 애니메이션 효과를 주어 더욱 자연스럽게 보이도록 할 수 있습니다.

기본 그라디언트 버튼 구현 예제

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('Gradient Button Example')),
        body: Center(
          child: GradientButton(
            text: "Press Me",
            onPressed: () {
              print("Button Pressed!");
            },
          ),
        ),
      ),
    );
  }
}

class GradientButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  GradientButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.purple],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Text(
          text,
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

• InkWell: 터치 효과를 줄 수 있는 위젯으로, 버튼이 눌릴 때 애니메이션이 적용됩니다.
• Container: 버튼의 배경에 그라디언트를 적용하는 데 사용됩니다. BoxDecoration의 gradient 속성에 LinearGradient를 설정하여 그라디언트 효과를 줍니다.

이 코드는 파란색에서 보라색으로 그라디언트가 적용된 버튼을 생성하며, 사용자가 버튼을 누를 때 InkWell로 터치 효과를 제공합니다.

2. ElevatedButton에 그라디언트 배경 적용하기

Flutter의 ElevatedButton 위젯은 기본적으로 그라디언트 배경을 지원하지 않지만, ButtonStyle을 사용하여 버튼의 스타일을 수정하고 Ink 위젯을 활용해 그라디언트를 적용할 수 있습니다.

ElevatedButton에 그라디언트 배경 적용 예제

class GradientElevatedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  GradientElevatedButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.zero,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
        primary: Colors.transparent, // 배경을 투명으로 설정
      ),
      onPressed: onPressed,
      child: Ink(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.orange, Colors.red],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
          alignment: Alignment.center,
          child: Text(
            text,
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

• ElevatedButton.styleFrom: 버튼의 스타일을 설정할 수 있는 메서드입니다. primary를 투명으로 설정하여 기본 배경 색을 제거합니다.
• Ink와 BoxDecoration: Ink 위젯 안에 그라디언트를 적용한 Container를 넣어 그라디언트 효과를 제공합니다.

이 예제는 오렌지색에서 빨간색으로 그라디언트된 배경을 가진 ElevatedButton을 구현하며, 기본 버튼 스타일을 유지하면서도 배경에 그라디언트를 적용할 수 있습니다.

 

 

반응형

 

3. 사용자 인터랙션에 반응하는 그라디언트 버튼 만들기

GestureDetector를 사용하면 버튼에 다양한 상호작용 효과를 추가하여, 사용자가 버튼을 누르거나 해제할 때 색상 변화 등의 효과를 줄 수 있습니다. 이 방법은 사용자 경험을 더욱 풍부하게 합니다.

터치 시 반응하는 그라디언트 버튼 예제

class InteractiveGradientButton extends StatefulWidget {
  final String text;
  final VoidCallback onPressed;

  InteractiveGradientButton({required this.text, required this.onPressed});

  @override
  _InteractiveGradientButtonState createState() =>
      _InteractiveGradientButtonState();
}

class _InteractiveGradientButtonState extends State<InteractiveGradientButton> {
  bool _isPressed = false;

  void _togglePress() {
    setState(() {
      _isPressed = !_isPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onPressed,
      onTapDown: (_) => _togglePress(),
      onTapUp: (_) => _togglePress(),
      onTapCancel: _togglePress,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 100),
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: _isPressed
                ? [Colors.deepPurple, Colors.blue]
                : [Colors.blue, Colors.deepPurple],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              blurRadius: 8,
              offset: Offset(4, 4),
            ),
          ],
        ),
        child: Text(
          widget.text,
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

• GestureDetector: 사용자의 터치 이벤트를 감지하여 버튼의 상태를 변경합니다.
• AnimatedContainer: 터치 이벤트가 발생할 때마다 버튼의 그라디언트 색상이 부드럽게 변화하도록 애니메이션을 적용합니다.
• _isPressed: 터치 상태에 따라 그라디언트 색상을 바꾸는 플래그입니다.

이 코드는 버튼을 누르면 그라디언트 색상이 부드럽게 전환되는 상호작용 효과를 추가하여, 시각적으로 더욱 매력적인 버튼을 만듭니다.

4. 아이콘이 포함된 그라디언트 버튼 만들기

Icon과 Text를 함께 표시하여 더 의미 있는 버튼을 만들 수 있습니다. 아이콘을 추가하면 버튼의 기능을 시각적으로 더 쉽게 전달할 수 있습니다.

아이콘이 포함된 그라디언트 버튼 예제

class IconGradientButton extends StatelessWidget {
  final String text;
  final IconData icon;
  final VoidCallback onPressed;

  IconGradientButton({required this.text, required this.icon, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 20),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.teal, Colors.green],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, color: Colors.white),
            SizedBox(width: 10),
            Text(
              text,
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

• Row: 아이콘과 텍스트를 가로로 배치하기 위해 사용합니다.
• 아이콘: 아이콘을 추가하여 버튼의 기능을 시각적으로 설명합니다.

이 예제는 청록색에서 녹색으로 변하는 그라디언트와 아이콘이 포함된 버튼을 만들어, 기능을 명확하게 전달합니다.

결론

Flutter에서 그라디언트 버튼을 만들기 위해 Container, ElevatedButton, Ink 등 다양한 위젯을 활용할 수 있습니다. 그라디언트 버튼은 앱의

디자인을 세련되게 만들고 사용자 경험을 더욱 풍부하게 해줍니다. Flutter의 그라디언트를 사용해 버튼에 매력적인 색상 변화를 추가하고, 다양한 상호작용과 애니메이션을 통해 차별화된 UI를 구현해보세요. 이번 글의 예제 코드를 참고하여 Flutter 애플리케이션에 그라디언트 버튼을 적용해 보세요!