【Flutter】関数を変数として引数で渡してみる（コールバック関数）

Flutter初心者がアプリ開発学習で挫折しないために、基本的なWidgetやDartの文法についての記事を更新しています。
Flutterが学べる動画も公開しているのでぜひご覧ください。

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。

関数を Function型として引数で渡して、その関数を実行してみます。

デフォルトとほぼ同じで、ボタンを押したら数字が1つ増えるアプリを例にコード紹介していきます。

まずは、関数 _countUp を作成します。

void _countUp() {
 setState(() {
   _counter++;
 });
}

FloatingActionButton を返す関数も用意します。
引数で受け取る関数は、Function型として宣言します。
実行するときは、関数なので『()』が必要になります。

Widget addButton(Function function) {
 return FloatingActionButton(
   child: Icon(Icons.add),
   onPressed: () {
     function();
   },
 );
}

Scaffold の floatingActionButton で addButton を呼び出し、引数に _countUp関数を指定することで、関数を引数で渡すことができます。

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text('コールバック変数'),
     centerTitle: true,
   ),
   body: Center(child: Text('$_counter', style: TextStyle(fontSize: 40.0),)),
   floatingActionButton: addButton(_countUp),
 );
}

全体のコードを貼っておくので、ぜひ参考にしてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Hatchout',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: TopPage(),
   );
 }
}


class TopPage extends StatefulWidget {
 @override
 _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {

 int _counter = 0;

 void _reBuild() {
   setState(() {
     _counter++;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('コールバック変数'),
       centerTitle: true,
     ),
     body: Center(child: Text('$_counter', style: TextStyle(fontSize: 40.0),)),
     floatingActionButton: addButton(_reBuild),
   );
 }

 Widget addButton(Function function) {
   return FloatingActionButton(
     child: Icon(Icons.add),
     onPressed: () {
       function();
     },
   );
 }

}