Flutterでフォトギャラリーのように、画像を縦横に表示するには、GridViewを使用します。

まずは、asssetsフォルダ内にimagesフォルダを作成し、画像を入れます。

image2

pubspecc.yaml内に、画像の位置を指定します。

image3

ターミナルで、flutter pub getを実行しましょう。

main.dartに、先程設定した画像パスのリストを作成します。

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
  ];

フォトギャラリーが隠れないように、Scaffold内のbodySafeAreaを設定します。

外側のスペースを作るために、Paddingを設定しましょう。

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8),
        ),
      ),
    );
  }
}

childGridViewbuilderを設定します。

builder内に、itemCountで、画像の数を指定します。

画像の指定は、images.lengthで表すことができます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: GridView.builder(
          itemCount: images.length,
          },
        ),
      ),
    ),
  );
}

また、フォトギャラリーがどのように表示されるかを指定するために、GridViewbuilder内にgridDelegateを設定します。

gridDelegateには、横の画像をいくつ並べるかを指定するcrossAxisCount、横のスペースを指定するcrossAxisSpacing、縦のスペースを指定するmainAxisSpacingを指定します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
        ),
      ),
    ),
  );
}

どの画像を表示するかを指定するために、GridViewbuilder内にitemBuilderを設定します。

itemBuilderには、Image.assetを返すようにします。

Image.assetには、初めに画像のパスを配列にしたimagesを設定し、indexで順番に表示させます。

どのように表示するかを設定するためにfitBoxFit.coverを指定します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: GridView.builder(
          itemCount: images.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
          itemBuilder: (context, index) {
            return Image.asset(images[index], fit: BoxFit.cover);
          },
        ),
      ),
    ),
  );
}

では、画面を確認してみましょう。

image4

フォトギャラリーのように並べることができました。

ブログ一覧