こんにちは。
株式会社エス・スリーのスタッフです。
本日も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 になります。
最後までお読みいただき、ありがとうございました。
