Flutterでモーダルを閉じたときに呼び出し元の処理を呼びたい

こんにちは。
株式会社エス・スリーのスタッフです。

本日もFlutterの話題です。
FlutterではshowModalBottomSheetを用いて任意のウィジェットをモーダルに表示できますが、
そのモーダルを閉じたとき、呼び出し元画面の処理を呼びたい!という内容になります。

import 'package:flutter/material.dart';

class MyModal extends StatefulWidget {
  final VoidCallback onButtonPressed;

  MyModal({required this.onButtonPressed});

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

class _MyModalState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Modal'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ボタンが押されたときにコールバックを呼び出す
            widget.onButtonPressed();
          },
          child: Text('Press me'),
        ),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  void handleButtonPress() {
    print('Button pressed in main screen!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ボタンが押されたときにモーダルを表示
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                // モーダルを表示するときにコールバックを渡す
                return MyModal(onButtonPressed: handleButtonPress);
              },
            );
          },
          child: Text('Show Modal'),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MainScreen(),
  ));
}

この例だと、MyModal上で「Press me」ボタンを押したとき、MainScreen に定義されたhandleButtonPressが呼ばれて、「Button pressed in main screen!」がログ表示されます。
handleButtonPressは引数を渡すこともできるので、モーダルから呼び出し元に値を受け渡すこともできますね。
その場合、final VoidCallback onButtonPressed はfinal Function(String) onButtonPressed になります。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次