「Flutter/画像/grid表示」の版間の差分

2020年1月16日 (木) 19:00時点における最新版

サンプル

画像がGridで3列表示される。

img.dart

class Img
{
  String url = "";
}

grid_page.dart

  List<Img> imgs = new List<Img>();
  Img img = new Img();
  img.url = "http://example.com/hoge.png";
  imgs.add(img);
  imgs.add(img);
  imgs.add(img);
  imgs.add(img);
  @override
  Widget build(BuildContext context) {
    GridView gridView = GridView.builder(
        itemCount: imgs.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Image.network(imgs[index].url,
              // height: 100.0,
              // width: 70.0,
              fit: BoxFit.cover);
        }
    );
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue.withOpacity(0.3),
          elevation: 0.0,
          title: Text("画像一覧",
              style: TextStyle(
                  fontSize: 16,
                  locale: Locale("ja", "JP")
              )
          ),
        ),
        extendBodyBehindAppBar: true,
        body: gridView
    );
  }

参考：https://flutter.ctrnost.com/basic/layout/gridview/