[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になるのならばページ遷移をした方がいいのですが、お知らせや選択肢を表示するぐらいならばこの方法で表示することができます。
最新記事
すべて表示現象 アプリ内にAdmobを追加して、アプリを起動すると、下記のエラーが発生 java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider 原因 AndroidManifestの書き方が誤っていた。 <meta-data>はactivityと同じ階層にある必要が
概要 Uriを持っていて、Urlに変換したい場合の方法で少し手惑ったので共有します 方法 String url = uri.toString(); これだけです。 最後に ページを開くだけだとUriでもUrlでもいいんですが、WebViewはUrlを要求してくるんですよね。
問題 以前、日本語を含むURLを開くためには、エンコーディングしてやる必要がある、という記事を書きました。 しかし、すでにエンコーディングされているURLを再度エンコーディングしてしまうと、別のURLになってしまいます。 つまり、URLを開く処理の前に、 ・エンコーディングが必要なURLか ・すでにエンコーディングがされているか を判定しないといけないことになります。これは中々煩雑な処理です。 発
