Flutter

【Flutter】フォトギャラリーのように、画像を縦横に表示する方法

作成日：2022年04月05日

更新日：2022年04月05日

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

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

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

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

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

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内のbodyにSafeAreaを設定します。

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

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",
  ];

  @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を設定します。

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

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

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

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

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

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

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

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

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

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

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