Open2
【Flutter】GridViewについて
作成方法
class _DummyState extends State<Dummy> {
@override
Widget build(BuildContext context) {
// ダミー画像一覧
final List<String> imageList = [
'https://placehold.jp/400x300.png?text=0',
'https://placehold.jp/400x300.png?text=1',
'https://placehold.jp/400x300.png?text=2',
'https://placehold.jp/400x300.png?text=3',
'https://placehold.jp/400x300.png?text=4',
'https://placehold.jp/400x300.png?text=5',
];
return Scaffold(
body: GridView.count(
// 1行あたりに表示するWidgetの数
crossAxisCount: 2,
// Widget間のスペース(上下)
mainAxisSpacing: 8,
// Widget間のスペース(左右)
crossAxisSpacing: 8,
// 全体の余白
padding: const EdgeInsets.all(8),
children: imageList.map((String imageURL) {
return SizedBox(
width: double.infinity,
height: double.infinity,
child: InkWell(
onTap: () => {},
child: Image.network(
imageURL,
fit: BoxFit.cover,
),
),
);
}).toList(),
),
);
}
}
※Stackを使ってアイコンを重ねてみる
class _DummyState extends State<Dummy> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
SizedBox(
width: double.infinity,
height: double.infinity,
child: InkWell(
onTap: () => {},
child: Image.network(
imageURL,
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.topRight,
child: IconButton(
onPressed: (){},
color: Colors.pink,
icon: const Icon(Icons.favorite_border),
),
),
],
);
}
}