13. 플러터 : 버튼 확장

이제 버튼이 2개다.
2개를 만들 줄 알면 3개나 4개 만드는 것은 쉽다.
2개의 버튼을 사용해서 가운데 있는 텍스트의 값을 변경하는 예제다.
'더하기'를 누르면 값이 증가하고 '빼기'를 누르면 값이 감소한다.
할 수 있겠지?

새로운 코드가 추가되고 하기 보다는
앞에서 배웠던 것들을 잘 조합하는 문제이기 때문에
직접 해볼 것을 강력히 추천한다!!

클래스의 이름을 GameBoard로 수정했고
버튼 생성을 쉽게 하기 위해 makeButton 함수를 만들었다.

import 'package:flutter/material.dart';

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

class GameBoard extends StatefulWidget {
    @override
    State createState() {
        return GameBoardState();
    }
}

class GameBoardState extends State<GameBoard> {
    int currentValue = 0;

    // 화살표(=>) 문법을 사용해서 한 줄짜리 함수 구성
    // void addValue() => currentValue++;
    // void subValue() => currentValue--;
    
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                Container(
                    child: Text(
                        currentValue.toString(),
                        style: TextStyle(fontSize: 128),
                    ),
                    padding: EdgeInsets.all(32),
                ),
                Row(
                    children: <Widget>[
                        // makeButton('더하기', addValue),
                        // makeButton('빼기', subValue),
                        
                        // 간단한 코드라서 함수를 따로 구성할 필요가 없다.
                        makeButton('더하기', () => currentValue++),
                        makeButton('빼기', () => currentValue--),
                    ],
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                ),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
        );
    }
    
    Widget makeButton(String title, VoidCallback callback) {
        return RaisedButton(
            child: Text(title),
            onPressed: () {
                setState(() {
                    callback();
                });
            },
        );
    }
}

가장 중요한 것은
setState 함수에 사용할 함수를 처리하는 부분인데
다트에는 => 문법이 있어서 한 줄짜리 함수를 축약해서 표현할 수 있고
한 줄이라서 함수 매개변수로 직접 사용할 수도 있다.
주석으로 막아놓은 부분을 대신할 수 있기 때문에 얼마나 편리한지 모르겠다.

함수가 어떻게 선언됐는지 알아야 할 때가 있다.
VoidCallback 함수라는 것을 찾으려면
onPressed 매개변수를 ctrl + 마우스 왼쪽 버튼으로 클릭하면 된다. (맥은 cmd)
그러면 매개변수가 정의된 곳으로 이동하고 해당 변수의 자료형을 만날 수 있다.
VoidCallback 자료형은 typedef 키워드를 사용해서 함수를 쉽게 사용할 수 있도록 재정의한 자료형이다.

혹시 눈치챘을려나?
우재는 정직해서 몰랐을 것 같은데..

setState 함수에 전달할 익명 함수도 한 줄이기 때문에 화살표 문법으로 대신할 수 있다.
이게 원래 해보기 전에는 긴가민가 하다.

Widget makeButton(String title, VoidCallback callback) {
    return RaisedButton(
        child: Text(title),
        onPressed: () {
            setState(() => callback());
        },
    );
}