自分で関数を作る

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 6/34。

2つのボタンが同じ動作をする場合、コードを一度だけ書いて名前を付けることができます。これを関数といいます。

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),
        ),
      ),
    );
  }
}