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

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

텍스트와 색상을 사용하여 버튼을 디자인하고, 다양한 기능과 속성을 제공하여 사용자 인터페이스를 풍부하게 만들 수 있습니다.

이 블로그에서는 Flutter에서 TextButton의 사용법, 주요 속성, 사용 팁, 실제 활용 예시 등을 자세히 살펴보겠습니다.

1. TextButton 기본 사용

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

import 'package:flutter/material.dart';

 

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

 

TextButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 코드
  },
  child: Text('버튼 텍스트'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    foregroundColor: MaterialStateProperty.all(Colors.white),
  ),
),

 

• onPressed 속성: 버튼 클릭 시 실행할 함수를 지정합니다. 이 함수는 버튼이 눌렸을 때 원하는 작업을 수행하도록 합니다.
• child 속성: 버튼에 표시할 텍스트를 지정합니다.
• style 속성: 버튼의 스타일을 설정합니다. backgroundColor, foregroundColor, padding, textStyle, shape 등 다양한 속성을 사용하여 버튼의 디자인을 변경할 수 있습니다.

2. 주요 속성

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

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

3. 사용 팁

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

4. 실제 활용 예시 (계속)

4.1 다양한 스타일의 TextButton

앞서 살펴본 예시 코드에서는 기본적인 TextButton 스타일을 사용했습니다.

다음은 TextButton의 스타일을 다양하게 변경하는 예시입니다.

 

TextButton(
  onPressed: () {
    print('둥근 버튼 클릭됨');
  },
  child: Text('둥근 버튼'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.green),
    foregroundColor: MaterialStateProperty.all(Colors.white),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0))),
  ),
),
SizedBox(height: 20),
TextButton(
  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),
  ),
),
SizedBox(height: 20),
TextButton(
  onPressed: () {
    print('아이콘 버튼 클릭됨');
  },
  child: Row(
    children: <Widget>[
      Icon(Icons.favorite, color: Colors.red),
      SizedBox(width: 10.0),
      Text('좋아요'),
    ],
  ),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.white),
    foregroundColor: MaterialStateProperty.all(Colors.black),
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)),
  ),
),

 

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

4.2 다이얼로그 및 메뉴에서 TextButton 사용

TextButton은 다이얼로그나 메뉴에서 사용하기에도 적합합니다.

다음은 TextButton을 사용하여 간단한 확인 다이얼로그를 만드는 예시입니다:

AlertDialog(
  title: Text('확인'),
  content: Text('이 작업을 수행하시겠습니까?'),
  actions: <Widget>[
    TextButton(
      onPressed: () {
        Navigator.of(context).pop(); // 다이얼로그 닫기
      },
      child: Text('취소'),
    ),
    TextButton(
      onPressed: () {
        print('확인 선택됨');
        // 여기에 확인 시 수행할 작업 코드 작성
      },
      child: Text('확인'),
    ),
  ],
);

 

이 코드는 "확인"이라는 제목과 "이 작업을 수행하시겠습니까?"라는 내용을 가진 다이얼로그를 만듭니다. 다이얼로그에는 "취소"와 "확인" 두 개의 TextButton이 있으며, 각 버튼을 클릭했을 때 원하는 작업을 수행하도록 합니다.

 

4.3 ListView 아이템의 액션 버튼으로 TextButton 사용

TextButton은 ListView 아이템의 액션 버튼으로 사용하여 편집, 삭제 등의 작업을 수행할 수 있습니다.

다음은 ListView 아이템에 TextButton 액션 버튼을 추가하는 예시입니다

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('아이템 $index'),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextButton(
            onPressed: () {
              print('수정 버튼 클릭됨 (인덱스: $index)');
            },
            child: Icon(Icons.edit),
          ),
          TextButton(
            onPressed: () {
               print('삭제 버튼 클릭됨 (인덱스: $index)');
               // 여기에 삭제 처리 코드 작성
            },
            child: Icon(Icons.delete),
           ),
         ],
        ),
    );
  },
),

이 코드는 10개의 아이템을 가진 ListView를 만들고, 각 아이템의 오른쪽에 "수정"과 "삭제" 액션 버튼으로 TextButton을 사용합니다.

각 버튼을 클릭했을 때 해당 아이템의 인덱스를 출력하고, 실제로는 아이템 수정이나 삭제 처리를 수행하는 코드를 작성해야 합니다.

5. 추가 고려 사항

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

6. 마무리

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

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

이 블로그 포스팅이 Flutter에서 TextButton을 사용하는 데 도움이 되었기를 바랍니다. 궁금한 점이나 추가적으로 알고 싶은 내용이 있으면 언제든지 질문해주세요.

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱