11. 플러터 : 버튼

지금까지 얘기했던 것과 버튼은 액션이라는 점에서 다르다.
텍스트나 사진은 일반적으로는 보여주기만 하고
사용자로부터 입력을 받거나 하지는 않는다.

화면 중앙에 간단하게 버튼을 만들었다.
버튼의 종류에는 여러 가지가 있는데
가장 쉬운지는 모르겠지만, 가장 흔하게 볼 수 있는 푸시 버튼이다.
플러터에서는 RaisedButton 클래스가 푸시 버튼의 역할을 담당한다.

나중을 위해 글자 색과 배경 색 옵션을 추가했다.
버튼 안에 텍스트 위젯이 들어간다는 점이 신선할 수도 있지만
이렇게 해야 버튼 제목에 대해 할 수 있는 것이 많아지기 때문에
번거로울 수 있지만 굉장한 장점이다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: RaisedButton(
                child: Text('Click me!'),
                onPressed: clickMe,
                textColor: Colors.white,
                color: Colors.black,
            ),
        );
    }
    
    void clickMe() {
        print('clicked!');
    }
}

가장 중요한 것은 onPressed 매개변수로
버튼을 눌렀을 때 호출되는 함수와의 연결을 담당한다.
연결에 사용되는 함수의 형태는 매개변수도 없고 반환값도 없는 가장 단순한 형태이다.

버튼을 누를 때마다 안드로이드 창에 'clicked' 문자열이 출력되어야 한다.
혹시라도 아무 것도 나타나지 않는다면 뭔가 잘못된 것이다.
굿럭!

비슷하지만 다른 코드를  하나 더 준비했다.
버튼을 눌렀을 때 호출될 함수를 따로 구현하지 않고 바로 정의할 수 있다.
핫 리로드 기능을 사용해서 'clicked!'가 '눌림!'으로 바뀌는지 확인해 보자.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: RaisedButton(
                child: Text('Click me!'),
                onPressed: () {
                    print('눌림!');
                    
                    // 배경색을 주황으로 바꾸고 싶지만, 에러!
                    // this.color = Colors.orange;
                },
                textColor: Colors.white,
                color: Colors.black,
            ),
        );
    }
}

원래는 주석으로 설명을 달아놓은 것처럼
버튼 누를 때마다 버튼의 배경색을 변경하고 싶었다.
그런데 이 코드로는 할 수 없다.
가장 단순하고 직관적인 코드를 사용할 수 없어서 아쉽다.

에러가 나는 이유는
color 속성이 존재하기는 하지만 final로 정의했기 때문에 수정할 수 없다.
즉, 읽기 전용 속성이라고 보면 된다.
this는 현재 객체, 버튼이 눌렸으니까 버튼이 된다.