AlertDialogをListViewで表示させたい
タイトルにもありますが、AlertDialogの表示をListViewで表示しようとしたら、エラーが発生しエラーログを検索した所、英語の記事が多かったので自分の復習と少しでも誰かの役に立てればと思い、投稿します。
まずは、エラーが発生したコード
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DialogPractice',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DialogPractice'),
),
body: Center(
child: ElevatedButton(
child: Text('ダイアログ表示ボタン'),
onPressed: () {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
// AlertDialogのcontentプロパティにListViewを渡す
content: ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入
},
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入
},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入
},
),
],
),
);
},
);
},
),
), //
);
}
}
コード実行後のエラー内容(画像)
最初のエラーコード(Render,,,)部分を検索して、英語記事を参考にして解決しました。
解決方法
下記コード、追記部分のListViewをContainerでラップして、width: double.maxFiniteで指定した所、うまく表示出来ました。
widthで指定しているdouble.maxFiniteですが、double型の有限値を示すものらしく、有限値内のサイズで指定出来るようです。(正確にはわかりきれていません。。。)
※widthの指定は、任意の値でも問題なく動作します。
maxFiniteドキュメント
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DialogPractice',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DialogPractice'),
),
body: Center(
child: ElevatedButton(
child: Text('ダイアログ表示ボタン'),
onPressed: () {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text('ダイアログサンプル'),
// 追記 ContainerでListViewをラップして、width(横サイズ)を指定した
content: Container(
width: double.maxFinite,
child: ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
trailing: Text('>'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
trailing: Text('>'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
trailing: Text('>'),
onTap: () {},
),
],
),
),
);
},
);
},
),
), //
);
}
}
エラー解決ができたので、良かったです。
ですが、少し味気なかったので、アレンジしてみました。
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DialogPractice',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DialogPractice'),
),
body: Center(
child: ElevatedButton(
child: Text('ダイアログ表示ボタン'),
onPressed: () {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text('ダイアログサンプル'),
// デフォルトで全方向にpaddingが付いているので、paddingを外す。
contentPadding: EdgeInsets.zero,
// 背景色を青色の半透明に変更。
backgroundColor: Colors.blue.withOpacity(0.6),
content: Container(
width: double.maxFinite,
// 今回は、要素が3しかない設定で余白が余っていたので、heightを指定
height: 200,
child: ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入する
},
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入する
},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
trailing: Text('>'),
onTap: () {
// タップした時の処理を記入する
},
),
],
),
),
);
},
);
},
),
),
);
}
}
以上となります。
少しでも誰かの参考になれば、幸いです。
もし、投稿内容に不備やおかしい所があれば、是非コメントの方を宜しくお願い致します。