今回は、ポップアップ等の別画面での入力操作用のウィジェットの実装方法の知識を深めていきたいと思います。
環境
・MacOS Ventura 13.6.3
・Xcode 15.1
・VSCode 1.85.1
・Flutter 3.16.5
・Dart 3.2.3
Flutterを使ってみよう その１１（入力操作②）
1. アラート表示
警告表示などで使用するアラート表示は、 CupertinoAlertDialog ウィジェットを使用します。
class AlertExample extends StatefulWidget {
const AlertExample({super.key});
@override
State<AlertExample> createState() => _AlertExampleState();
}
class _AlertExampleState extends State<AlertExample> {
String _showActionText = '初期値';
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: Container(
width: double.infinity,
color: Colors.white,
child: Column(
children: [
CupertinoButton(
onPressed: () {
_showAlertDialog(context);
},
child: const Text('アラート表示'),
),
Text('操作内容：$_showActionText'),
],
),
),
);
}
void _showAlertDialog(BuildContext context) {
showCupertinoDialog<void>(
context: context,
builder: (BuildContext context) => CupertinoAlertDialog(
titl2. アクションシート表示
簡単な選択肢表示などで使用するアクションシート表示は、 CupertinoActionSheet ウィジェットを使用します。
class ActionExample extends StatefulWidget {
const ActionExample({super.key});
@override
State<ActionExample> createState() => _ActionExampleState();
}
class _ActionExampleState extends State<ActionExample> {
String _showActionText = '初期値';
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: Container(
width: double.infinity,
color: Colors.white,
child: Column(
children: [
CupertinoButton(
onPressed: () {
_showActionDialog(context);
},
child: const Text('アクション表示'),
),
Text('操作内容：$_showActionText'),
],
),
),
);
}
void _showActionDialog(BuildContext context) {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) => CupertinoActionSheet(
&nb3. コンテキストメニュー
任意のウィジェットに対し、長押ししたときにコンテキストメニュー表示は、 CupertinoContextMenu ウィジェットを使用します。
class ContextMenuExample extends StatefulWidget {
const ContextMenuExample({super.key});
@override
State<ContextMenuExample> createState() => _ContentMenuExampleState();
}
class _ContentMenuExampleState extends State<ContextMenuExample> {
String _showActionText = '初期値';
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: Container(
width: double.infinity,
color: Colors.white,
child: Column(
children: [
SizedBox(
width: 100,
height: 100,
child: CupertinoContextMenu(
actions: [
CupertinoContextMenuAction(
onPressed: () {
setState(() {
_showActionText = 'コピー';
4. まとめ
今回は、ポップアップ等の別画面での入力操作用のウィジェット実装方法の知識を深めるのを目的に記事を書きました。
アプリ実装ためには、他のウィジェットの知識やパッケージなどを学習する必要がありますが、その辺りについては、次回以降に触れていければと思います。