Dart/Flutter

Flutter 기초 - Callback (22)

아랑팡팡 2024. 5. 23. 20:35
728x90

 

Flutter 기초 - Callback (22)

 

1. Callback

 - 함수나 메서드를 다른 함수나 메서드의 인자로 전달하는 기법으로 특정 이벤트나 조건이 만족되었을때 지정한 코드를 실행할 수 있다.

 

2. Gesture

 - 사용자의 터치입력으로 GestureDetector 위젯을 사용해 탭, 더블탭, 드래그, 핀치 등의 이벤트를 처리할 수 있다. 

 

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

void main() {
  runApp(const MaterialApp(home: HomeWidget()));
}

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

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

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

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return const TestWidget();
  }
}

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

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  int value = 0;

  void addCounter() {
    setState(() => ++value);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text('Count : $value', style: const TextStyle(fontSize: 30)),
        ),
        TestButton(addCounter),
      ],
    );
  }
}

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

  final VoidCallback callback;

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

 

TestWidget

 - addCounter함수에서 버튼이 클릭되어 호출되었을때 value를 증가시키고 UI를 업데이트한다.

 - Text위젯을 통해서 화면에 증가된 값이 표시되고 TestButton을 통해서 사용자 입력을 받아 카운터를 증가 시킨다.

 

TestButton

 - 버튼이 탭될때마다 주어진 콜백을 실행하고 GestureDetector를 사용해 이벤트를 감지한다. 탭이 될때 callback함수가 실행되어 _TestWidgetState의 addCounter메소드가 호출되 카운터 값이 증가한다.

 

728x90
반응형
LIST
저작자표시 비영리 변경금지