플러터에서 OutlinedButton 사용하기: 가이드 및 활용 예시

 

OutlinedButton은 Flutter에서 테두리만 있는 버튼을 만드는 데 사용되는 유용한 위젯입니다.

주요 기능, 속성, 활용 예시 등을 자세히 살펴보고, 실제 개발에 활용할 수 있는 코드와 팁을 제공합니다.

1. OutlinedButton 기본 사용

OutlinedButton을 사용하려면 먼저 material.dart 라이브러리를 import해야 합니다.

import 'package:flutter/material.dart';

 

OutlinedButton 위젯은 다음과 같은 기본 구조를 가지고 있습니다.

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 코드
  },
  child: Text('버튼 텍스트'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.transparent), // 투명 배경 설정
    foregroundColor: MaterialStateProperty.all(Colors.blue), // 글자색 설정
    side: MaterialStateProperty.all(BorderSide(color: Colors.blue)), // 테두리 설정
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)), // 여백 설정
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))), // 모양 설정
  ),
),

 

• onPressed: 버튼 클릭 시 실행할 함수를 지정합니다.
• child: 버튼에 표시할 위젯을 지정합니다.
• style: 버튼의 스타일을 설정합니다. backgroundColor, foregroundColor, side, padding, shape 등 다양한 속성을 사용하여 버튼의 디자인을 변경할 수 있습니다.

주의 사항: 기본적으로 OutlinedButton은 투명한 배경을 가지고 있으며, 테두리만 표시됩니다. 배경색을 추가하려면 backgroundColor 속성을 사용해야 합니다.

2. 주요 속성

OutlinedButton에는 다음과 같은 주요 속성들이 있습니다:

• onPressed: 버튼 클릭 시 실행할 함수 (필수)
• child: 버튼에 표시할 위젯 (필수)
• style: 버튼 스타일 (선택)
• backgroundColor: 버튼 배경색
• foregroundColor: 버튼 글자색
• side: 버튼 테두리 속성 (색상, 너비, 스타일 등)
• padding: 버튼 주변 여백
• splashColor: 버튼 눌렀을 때 표시되는 물결 효과 색상
• tooltip: 버튼에 대한 설명 텍스트 (도움말)
• visualDensity: 버튼의 시각적 밀도 (데이터 밀도에 따라 버튼 크기 조정)

3. 활용 팁

• OutlinedButton은 다양한 버튼 스타일링을 제공합니다. style 속성을 사용하여 버튼의 배경색, 글자색, 테두리, 여백, 모양 등을 변경할 수 있습니다.
• onPressed 속성에 함수를 지정하여 버튼 클릭 시 원하는 작업을 수행할 수 있습니다.
• tooltip 속성을 사용하면 버튼에 대한 설명 텍스트를 제공하여 사용자 경험을 향상시킬 수 있습니다.
• OutlinedButton은 다른 위젯들과 함께 사용하여 다양한 기능을 구현할 수 있습니다. 예를 들어, AppBar의 액션 버튼으로 사용하거나, ListView 아이템의 액션 버튼으로 사용할 수 있습니다.

4. 실제 활용 예시

child: Text('둥근 버튼'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.transparent),
    foregroundColor: MaterialStateProperty.all(Colors.blue),
    side: MaterialStateProperty.all(BorderSide(color: Colors.blue)),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0))), // 둥근 모양 설정
  ),
),
SizedBox(height: 20.0),
OutlinedButton(
  onPressed: () {
    print('그라데이션 버튼 클릭됨');
  },
  child: Text('그라데이션 버튼'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    )),
    foregroundColor: MaterialStateProperty.all(Colors.white),
    side: MaterialStateProperty.all(BorderSide(color: Colors.white)),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
),
SizedBox(height: 20.0),
OutlinedButton(
  onPressed: () {
    print('아이콘 버튼 클릭됨');
  },
  child: Row(
    children: <Widget>[
      Icon(Icons.favorite, color: Colors.red),
      SizedBox(width: 10.0),
      Text('좋아요'),
    ],
  ),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.transparent),
    foregroundColor: MaterialStateProperty.all(Colors.black),
    side: MaterialStateProperty.all(BorderSide(color: Colors.black)),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
),

 

• 둥근 버튼: shape 속성을 사용하여 버튼 모양을 둥글게 만들 수 있습니다.
• 그라데이션 버튼: backgroundColor 속성에 LinearGradient을 사용하여 버튼에 그라데이션 효과를 적용할 수 있습니다.
• 아이콘 버튼: child 속성에 Row 위젯을 사용하여 아이콘과 텍스트를 함께 배치하고, padding 속성을 사용하여 여백을 조절할 수 있습니다.

5. 추가 고려 사항

• 접근성: 시각 장애인 사용자를 위해 버튼에 tooltip을 제공하는 것이 좋습니다.
• 성능: 애니메이션 효과를 사용할 때는 성능 영향을 고려해야 합니다.
• 테스트: 다양한 기기와 환경에서 OutlinedButton의 동작을 테스트해야 합니다.

6. 마무리

OutlinedButton은 Flutter에서 간단하고 세련된 버튼을 만드는 데 유용한 위젯입니다.

다양한 스타일링, 기능, 활용 예시들을 통해 사용자 인터페이스를 풍부하고 매력적으로 만들 수 있습니다.

이 블로그 포스팅이 Flutter에서 OutlinedButton을 사용하는 데 도움이 되었기를 바랍니다.

궁금한 점이나 추가적으로 알고 싶은 내용이 있으면 언제든지 질문해주세요.