Flutter - Callback - 1

Gun·2023년 10월 17일
0

Flutter

목록 보기
15/25
post-thumbnail
💡 학습목표
   1. 플러터에서  콜백 함수(callback function)란? 
   2. 콜백 메서드 만들어 보기 

1. 플러터에서 콜백 함수(callback function)란?

플러터에서 콜백 함수(callback function)는 한 위젯이나 클래스가 다른 위젯이나 클래스에게 특정 작업을 수행하도록 요청을 보내는 방법입니다. 일반적으로, 위젯의 부모가 자식 위젯에게 콜백 함수를 제공하여, 자식 위젯이 특정 상황에 부모 위젯에게 정보를 전달할 수 있게 합니다.

콜백은 자주 사용되는 프로그래밍 패턴 중 하나로, 함수나 메서드를 인자로 전달하여 나중에 어떤 시점에 호출되게 하는 것을 말합니다.

2. 콜백 메서드 만들어 보기

시나리오 1 - 콜백 함수
부모 위젯에서 자식 위젯으로 콜백 함수를 제공하고 자식 위젯에서 부모 위젯에게 정보를 전달한다.


import 'package:flutter/material.dart';

void main() {
  runApp(ParentWidget());
}

// 부모위젯
class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int _count = 0;

  void _handleChildButtonPressed(){
    setState(() {
      _count++;
    });
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('count : ${_count}'),
              ChildWidget(_handleChildButtonPressed),
            ],
          ),
        ),
      )),
    );
  }
}

// 자식위젯
// 1. 자식 객체 생성시에 매개체가 될 매개변수를 받게 설계
class ChildWidget extends StatelessWidget {
  final VoidCallback onButtonPressed;

  // 생성자
  const ChildWidget(this.onButtonPressed, {super.key});

  
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: onButtonPressed,
        child: Text('Press me'));
  }
}

0개의 댓글