[Flutter/dart] 画面に浮き出るページの作り方
概要
スマホアプリでは、画面を遷移せずにその場で浮き出てくるタイプのページがある（お知らせなどに多い）。あれをFlutterで作る方法を紹介します。
方法
SimpleDialogを使います。childrenプロパティにSimpleDialogOptionを渡すのですが、このSimpleDialogOptionのchild:プロパティに好きなWidgetを渡せばいいのです。ここではListTileとIconButtonを渡してみます。
@override
//Stateful WidgetのState
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
margin: const EdgeInsets.only(top:20, left:20),
child: RaisedButton(
child: Text('Tap'),
onPressed: ()async{await _showPage(context);},
//ボタンタップでページが出現
)
)
);
}
//ページが出現する処理
Future<bool> _showPage(BuildContext context) async {
List<int> _ids = List.generate(4, (index) => index + 1);
//番号のリスト
bool res = await showDialog<bool>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text('Title'),
children: _ids.map((e) =>
SimpleDialogOption(
child: ListTile(
leading: CircleAvatar(
child: Icon(Icons.person),
),
title: Text(e.toString()),
),
)).toList()
..add(
SimpleDialogOption(
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
)
)
)
);
}
);
return res;
}
}
最後に
あんまり複雑なUIになるのならばページ遷移をした方がいいのですが、お知らせや選択肢を表示するぐらいならばこの方法で表示することができます。
最新記事
すべて表示やりたいこと TextFieldで入力フォームを作りたい。 例えば入力内容が金額の場合、3桁区切りで頭に￥を付けた表記にしたい。 ただしユーザにこれらを入力させるのではなく、ユーザはあくまで数字を入力するだけで、アプリ側で自動でフォーマットしたい。 方法 TextInputFormatterを継承し、所望のフォーマット処理を追加することで実現可能。 例えばこの記事などを参照。 以下は個人的に躓いた
現象 やってること iosシミュレータで画像をデバイスのローカルに保存 保存したパスをデータベースに保存 アプリ立ち上げ時にデータベースから画像パスを取得し、そのパスの画像を画面上に表示 起きている現象 iosシミュレータを再起動した場合、上記3で「ファイルパスが見つからない」というエラーが出る 原因 保存時のディレクトリを getApplicationDocumentsDirectory() に
やりたいこと 初期値さえ決まればあとは不変な変数がある ただし、コンストラクタ起動時にはまだ決定できない このような変数について late finalで変数を定義 （何らかのタイミングで）初期化されたかどうかをチェックし、されていなければ値を入れる（チェックしないとfinalに値を代入したエラーになるので） この場合、「初期化されたかどうか」はどのようにチェックしたらいいのか分からなかった nul
