[Flutter] Widget - TextButton

1. TextButton이란?

TextButton Widget은 Text 형태의 버튼 기능을 제공하는 Widget입니다.

2. TextButton 생성자 및 속성

https://api.flutter.dev/flutter/material/TextButton-class.html

TextButton class - material library - Dart API

Flutter Material API 가이드를 통해 TextButton Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

 

○ 생성자(Constructor)

<TextButton 생성자>

○ 속성(Property)

1) onPressed

<onPressed 속성>

- 작성 필수 속성

- 매개변수 타입 : VoidCallback

- 역할 : 버튼을 누르면, Callback 함수 호출

 

2) onLongPress

<onLongPress 속성>

- 매개변수 타입 : VoidCallback

- 역할 : 버튼을 길게 누르면, Callback 함수 호출

 

3) style

<style 속성>

- 매개변수 타입 : ButtonStyle

- 역할 : 버튼의 스타일 설정

 

4) child

<child 속성>

- 매개변수 타입 : Widget

- 역할 : 하위 Widget 추가

3. 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: const Text('TextButton Widget')),
        body: TextButtonPage(),
      ),
    );
  }
}

class TextButtonPage extends StatefulWidget {

  @override
  State<TextButtonPage> createState() => _TextButtonPageState();
}

class _TextButtonPageState extends State<TextButtonPage> {
  bool change = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TextButton(
            onPressed: () {
              setState(() {
                change = !change;
              });
            },
            style: TextButton.styleFrom(
              primary: change ? Colors.blue : Colors.black,
              textStyle: const TextStyle(
                fontSize: 50.0,
              ),
            ),
            child: Text(change ? '파란 버튼' : '검정 버튼'),
          )
        ],
      ),
    );
  }
}

예제 코드의 의미는 다음과 같습니다.

• MyApp(사용자 생성 Widget) 실행
  • StatelessWidget을 상속받는 MyApp Widdget이 빌드되면서, MaterialApp Widget 반환
    • MaterialApp Widget의 홈(메인) 화면을 Scaffold Widget으로 구성
      • 'TextButton Widget'이라는 문자열로 상단 메뉴 구성
      • TextButtonPage(사용자 생성 Widget)으로 본문 구성
        • statefulwidget을 상속받은 TextButtonPage Widget에서 State를 생성하면서 _TextButtonPageState(사용자 생성 Widget) 반환
          • TextButtonPage 타입의 State Widget을 상속받은 _TextButtonPageState Widget에서 다음과 같은 작업 수행
            • bool 타입의 change 변수를 false 값으로 초기화
            • 빌드되면서, SizedBox Widget 반환
              • 너비, 높이 최대치 설정
              • 하위에 가로, 세로 기준 가운데 정렬된 TextButton Widget 추가
                • 버튼을 누르면, change 변수의 값을 반대값으로 설정(false -> true, true -> false)
                • 버튼 글자의 색상은 change 변수의 값이 true이면 blue, false이면, black
                • 글자 크기 50
                • 하위 Widget으로 Text Widget 추가
                  • change 변수의 값이 true이면 '파란 버튼', false이면, '검정 버튼'

4. TextButton 실행 결과

<실행 화면>

<버튼 클릭 후 화면>