나만의 함수

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 6번째.

두 버튼이 같은 일을 한다면 코드를 한 번만 작성하고 이름을 붙일 수 있습니다. 이것이 함수입니다:

void sayHello() {
  print('Hello!');
}

sayHello는 함수의 이름이고, 중괄호 안의 코드는 함수가 하는 일이며, void는 아무것도 반환하지 않는다는 뜻입니다. 예를 들어 main 바로 아래처럼 class MyApp 바깥에 따로 작성하세요.

함수를 실행하려면 이름 뒤에 괄호를 붙여 작성하세요: sayHello();. 버튼에 전달하려면 괄호 없이 이름을 작성하세요:

ElevatedButton(onPressed: sayHello, child: Text('Hi'))

괄호 없이 작성하면 버튼에 함수 자체를 전달하며, 버튼은 탭할 때마다 함수를 실행합니다. 괄호를 붙이면 onPressed: sayHello()처럼 Dart가 함수를 즉시 실행하고 그 결과를 버튼에 전달합니다. 결과는 아무것도 없으므로 코드는 컴파일되지 않습니다.

챌린지

쉬움

두 버튼 모두 Hello!를 출력해야 합니다. Hello!를 출력하는 함수 sayHello를 작성하고, 이를 Say hello 버튼과 손을 흔드는 모양의 플로팅 버튼에 연결하세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Hello!');
            },
            child: Text('Say hello'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.waving_hand),
        ),
      ),
    );
  }
}