[Flutter] TIL 04

Dart Functions

우리가 만약 로봇에게 마트에 있는 우유를 배달해줄 것을 지시한다고 하자. 그럼 오른쪽으로 이동, 왼쪽으로 이동, 앞으로 이동..등 많은 행동들을 내가 직접 지시를 해야한다. 그렇게 되면 많이 귀찮아지기 때문에 우리는 코드 블록으로 패키징한다. 코드 블록은 일련의 중괄호 안에 있는 코드로 표현된다.

중괄호 안에 모든 지시사항이 있으면 해당 코드 블록에 이름을 지정할 수 있다.

void getMilk() {
	leave house
    move right
    move left
    ...
}

함수가 호출될 때 발생해야 하는 모든 일을 포함한다. 아래 함수는 이름이 있기 때문에 'Named function'이라고 한다.

함수 선언

void getMilk() { //doSomething }

아래 함수는 이름이 없기 때문에 'Anonymous function'이라고 한다. (익명함수)

() { //doSomething }

ex)
onPressed: (){
                print('Left button got pressed');
       

함수 호출

getMilk();

🚓매개변수가 있는 함수
date type과 매개변수명을 함께 적어야한다.
함수 선언

void getMilk (int bottles) {
	double cost = bottles * 1.5;
}

--
void getMilk ({int numBottles}) {
	double cost = bottles * 1.5;
}

함수명 옆에 있는 중괄호의 경우 main함수에서 직접 원하는 값을 넣어줄 때 사용된다.
함수 호출

getMilk(2);

--
getMilk(numBottles: 2);

🚅화살표 함수
단일 명령이 있을 때 화살표를 사용한다. 두줄 이상의 명령이 있으면 안된다. 즉, return 키워드를 사용하는 것과 같은 의미다.

void main() => runApp(XylophoneApp());
		↓↓↓
void main() {
	runApp(
    XylophoneApp()
    	);
}

매개변수가 있는 화살표 함수

int add(int n1, int n2) {
	return n1+n2;
}
		↓↓(동일한 의미임)
int add(int n1, int n2) => n1 + n2;

---

같은 위치에 있는 이미지를 다른 이미지로 변경하는 방법

왼쪽에 있는 주사위를 5로 된 주사위로 바꾸고 싶다고 가정하자. Widget build 블록 안에 var leftDiceNumber = 1;을 작성하고

child: Image.asset('Images/dice1.png')),
		↓↓
child: Image.asset('Images/dice$leftDiceNumber.png')),

$뒤에 변수 이름을 작성해주면 된다. 이미지 파일의 이름을 숫자로 순서대로 1,2,3,...로 해야 변수값에 맞게 변경이 된다.

♨ 변수 선언을 Widget build 블록 밖에서 하면 (예를 들어 @override 바로 위에) hot-reload가 실행되지 않는다. hot-reload는 코드 블록 안에서만 변경사항이 반영되기 때문이다. 그래서 코드 블록 안에서 변수 선언을 하자!

Stateful Widget

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  int leftDiceNumber = 1;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextButton(
                onPressed: (){
                  leftDiceNumber = 5;
                },
                child: Image.asset('images/dice$leftDiceNumber.png')),
          ),
          Expanded(
            child: TextButton(
                onPressed: (){
                  print('Right button got pressed');
                },
                child: Image.asset('images/dice1.png')),
          ),
        ],
      ),
    );
  }
}

해당 코드는 stateless 코드를 복사해서 stateful형식으로 붙인것이다. 하지만 이 코드는 왼쪽 주사위를 눌렀을 때 5로 변하지 않는다. setState이라는 메소드를 호출해서 상태를 update하고 있다는 것을 구체적으로 지정해줘야한다.