[GRAMMAR] VoidCallback(), Function(x), ValueChanged<T>

위와 같은 함수들이 많이 헷갈렸기 때문에 이를 정리하기 위함이다.

 

Function(x) 

 

Function의 경우에는 Parmeter를 넘겨줄 수도 있고, 리턴값 또한 받을 수 있다.

만약 부모로 부터 return 값을 받고 싶으면 Function(x)를 사용하면 된다.

 

예제를 살펴보면 확실하게 알 수 있다.

 

import 'package:flutter/material.dart';
import 'count.dart';

class CounterPage extends StatefulWidget {
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget Communication")),
      body: Center(
        child: Count(
          
          // 리턴 받은 변수를 다음과 같이 사용가능!
          onCountChanged: (int val) {
            setState(() => count += val);
          },
        )
      ),
    );
  }
}

class Count extends StatelessWidget {
  final int count;
  final Function(int) onCountChanged;

  Count({
    @required this.count,
    @required this.onCountChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
          	// 1을 리턴.
            onCountChanged(1);
          },
        ),
        IconButton(
          icon: Icon(Icons.remove),
          onPressed: () {
            onCountChanged(-1);
          },
        ),
      ],
    );
  }
}

 

VoidCallback()

 

우선 VoidCallback() 함수는 Parameter를 넣을 수도 없고, 리턴값도 존재하지 않는다.

고로 VoidCallback() 함수는 리턴 값이 없는 callback event에 유용하다고 할 수 있다.

 

즉, 이렇게 생각할 수 있다. 리턴 값과, Parameter가 없는 Function !

typedef VoidCallback = void Function();

 

즉 onPressed 와 같은 느낌으로 생각하면 된다.

 

예제를 살펴보면 확실하게 알 수 있다.

import 'package:flutter/material.dart';
import 'count.dart';

class CounterPage extends StatefulWidget {
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget Communication")),
      body: Center(
        child: Count(
          count: count,
          onCountSelected: () {
            print("Count was selected.");
          },
        )
      ),
    );
  }
}

// 아래와 같이 Voidcallback 함수도 Parameter로 넘겨줄 수 있다!

class Count extends StatelessWidget {
  final int count;
  final VoidCallback onCountSelected;

  Count({
    @required this.count,
    this.onCountSelected,
  });

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text("$count"),
      onPressed: onCountSelected(),
    );
  }
}

 

typedef를 사용한 예시 

 

// Not use typedef

class MyClass { 
  static doSomething(int i) { /* ... */ }
  MyOtherClass myOtherClass = new MyOtherClass(doSomething);
}
class MyOtherClass {
  final void Function(int) callback;
  MyOtherClass(this.callback);
  void callCallaback() { callback(5); }
}

// use typedef

typedef Int2VoidFunc = void Function(int);
// or: typedef void Int2VoidFunc(int arg);
class MyOtherClass {
  final Int2VoidFunc callback;
  MyOtherClass(this.callback);
  void callCallaback() { callback(5); }
}

 

ValueChanged<T>

 

Function(x)과 같은데 typedef를 통해서 좀 더 직관적으로 표현한 것이다.

Function과 기능은 다르지 않다.

typedef ValueChanged<T> = void Function (T value);

 

[참고링크]

🔗 https://www.digitalocean.com/community/tutorials/flutter-widget-communication

How To Communicate Between Widgets with Flutter using VoidCallback and Function(x) | DigitalOcean