[Flutter] Callback Function

 

 

오늘은 flutter에서 어떠한 동작 이후에 다른 위젯에서 값을 처리하는 Callback 함수를 사용해 보겠다.

 

flutter에 stateful 위젯에서는 위젯 파일이나 위젯만 벗어나도 해당 state에 접근하기 어려운데,

 

그것을 Callback으로 일정 부분 해결 가능하다.

 

사전 셋팅

 

먼저 Callback 함수를 사용하기 위해 다른 State에 있는 텍스트 두 개를 만들어준다.

 

우리는 UP을 클릭 시 다른 State에 있는 Count 값을 올려줘 보겠다.

 

 

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CallBack'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Count: $value', style: const TextStyle(fontSize: 30)),
          const TestButton(),
        ],
      ),
    );
  }
}

class TestButton extends StatelessWidget {
  const TestButton({super.key});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 8),
        width: double.infinity,
        child: Center(
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
            decoration: BoxDecoration(border: Border.all()),
            child: const Text(
              'Up',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

 

Callback Function

 

버튼 클릭시 Count 값을 변경해주려면 어떻게 해야 할까?

 

Test 위젯에서 숫자를 나타내는 값인 value를 증가시키는 함수를 미리 만들어두고,

 

TestButton 위젯에서 그 함수를 받아 버튼이 클릭 시 함수를 실행시키면 된다.

 

value 증가함수 생성

 

먼저 Test 위젯에서 값을 올려주는 함수를 만들어준다.

 

void upCount() => setState(() => ++value);

 

VoidCallback 사용

 

반환값이 없는 Callback을 사용할 때 VoidCallback으로 타입을 지정해 줄 수 있다.

 

VoidCallback으로 타입의 callback 매서드를 지정해 준 뒤,

 

final VoidCallback callback;

 

TestButton 사용 시 callbac값을 같이 받도록 해준다.

 

const TestButton(this.callback, {super.key});

 

 

이후 Test 위젯에서 TestButton을 사용시 upCount를 지정해 준다.

 

이때 중괄호는 붙이지 않는다.

 

TestButton(upCount)

 

이 작업을 통해 Test 위젯에 upCount 함수를 TextButton이 사용되면서 callback 함수로 받아지게 되고,

 

TextButton 위젯 안에서도 callback 함수로 Count 값을 증가시킬 수 있다.

 

이때 call()을 사용하여 함수를 불러올 수 있다.

 

onTap: () => callback.call()

 

인자를 가지고 있는 Callback Function

 

만약 upCounter 매서드가 인자를 갖는다면 어떻게 될까?

 

upCount 매서드에 int 인자를 받도록 지정해 주겠다.

 

void upCount(int addValue) => setState(() => value += addValue);

 

 

그러면 TestButton에 오류가 생기는 것을 볼 수 있다.

 

 

오류의 원인은 void Function() 값을 받아야 하는데, void Function(int) 값을 받았다는 것이다.

 

우리는 int 값을 포함시킬 것이기에 callback을 void Function(int) 값에 맞게 수정해주어야 한다.

 

VoidCallback 타입이 아닌 Function(int) 타입으로 수정을 해준다.

 

final Function(int) callback;

 

그리고 이전과 달리 call()을 호출 시 int 값과 함께 반환을 해준다.

 

onTap: () => callback.call(5),

 

그 후 실행 해보면 call에 지정한 int 값만큼 Count 값이 오르는 것을 확인할 수 있다.

 

실행 화면