CupertinoAlertDialog に TextField を追加するには、CupertinoAlertDialog の content プロパティに CupertinoTextField を埋め込むことで実現できます。
目次
方法
CupertinoAlertDialog(
content: CupertinoTextField(),
);必要に応じてtitleやactionsを設定してください。
CupertinoAlertDialogの使い方については以下の記事で詳しく解説しています。
Seeds
【Flutter】iOS風のAlertDialogを表示する方法：CupertinoAlertDialog | Seeds
FlutterでiOS風のAlertDialogを表示するには、CupertinoAlertDialogウィジェットを使用します。CupertinoAlertDialogはiOSスタイルのダイアログを提供し、デフォルトでiOS…
サンプルコード
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
final TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('CupertinoAlertDialog Example'),
),
child: Center(
child: CupertinoButton(
child: Text('Show Alert'),
onPressed: () => _showDialog(context),
),
),
);
}
void _showDialog(BuildContext context) {
showCupertinoDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text('Input'),
content: Column(
children: [
SizedBox(height: 10),
CupertinoTextField(
controller: _controller,
placeholder: 'Enter something',
),
],
),
actions: [
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {
// 入力された値を使用した処理
print('Input: ${_controller.text}');
Navigator.of(context).pop();
},
),
],
);
},
);
}
}
Comment