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());
},
);
}


'플러터' 카테고리의 다른 글

15. 플러터 : 버튼 종류  (0) 2019.02.08
14. 플러터 : 버튼 + 사진  (0) 2019.02.07
13. 플러터 : 버튼 확장  (0) 2019.02.07
12. 플러터 : 버튼 (Stateless vs. Stateful)  (0) 2019.02.07
11. 플러터 : 버튼  (0) 2019.02.07
10. 플러터 : 사진 옵션(BoxFit)  (0) 2019.02.03