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),
           ),
         ),
       ],
    );
  }
}