[Flutter]アプリ内アルバムの実装方法

今回は、アプリ内アルバムの実装方法をご紹介したいと思っています。

使用するPackageについて

型付きデータ リストを操作するためのPackageです。
https://pub.dev/packages/typed_data

アプリ内のアルバムの実装に必要です。
https://pub.dev/packages/photo_manager

セットアップ

セットアップについては、Packageのサイトを参考にしてください。今回は割愛させていただきます。
https://pub.dev/packages/photo_manager

使用例

// Dart imports:
import 'dart:typed_data';

// Flutter imports:
import 'package:flutter/material.dart';

import 'package:photo_manager/photo_manager.dart';

class AlbumScreen extends StatefulWidget {
  const AlbumScreen({
    Key? key,
  }) : super(key: key);

  @override
  _AlbumScreenState createState() => _AlbumScreenState();
}

class _AlbumScreenState extends State<AlbumScreen> {
  final List<Widget> mediaList = [];
  final List<List<AssetPathEntity>> imageList = [];
  int currentPage = 0;
  int? lastPage;
  String image = '';

  @override
  void initState() {
    fetchNewMedia();
    super.initState();
  }

  Future<void> fetchNewMedia() async {
    lastPage = currentPage;
    final result = await PhotoManager.requestPermissionExtend();
    if (result.isAuth) {
      final albums = await PhotoManager.getAssetPathList(onlyAll: true);
      final media =
          await albums[0].getAssetListPaged(size: 60, page: currentPage);
      final temp = <Widget>[];
      for (final asset in media) {
        temp.add(
          FutureBuilder(
            future: asset.thumbnailDataWithSize(
              const ThumbnailSize(200, 200),
            ),
            builder:
                (BuildContext context, AsyncSnapshot<Uint8List?> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return GestureDetector(
                  onTap: () async {
                    //TODO ここで写真の情報が取得できます。
                    print(asset.longitude);
                    print(asset.latitude);
                  },
                  child: Stack(
                    children: <Widget>[
                      Positioned.fill(
                        child: Image.memory(
                          snapshot.data!,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  ),
                );
              }
              return Container();
            },
          ),
        );
      }
      setState(() {
        mediaList.addAll(temp);
        currentPage++;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.black,
      ),
      body: mediaList.isEmpty
          ? Container(color: Colors.grey)
          : GridView.builder(
              itemCount: mediaList.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              itemBuilder: (BuildContext context, int index) {
                return mediaList[index];
              },
            ),
    );
  }
}

最後に

Verooは、Blockchain技術を活用した「想いの巡るグルメSNSアプリ」です。食に対する熱量、例えばラーメンがめちゃくちゃ好きで年間400杯食べているとか、変態的に具材にこだわった中華料理を作っているなどのような、今まで直接お金にはならなかった食に対する情熱や熱量、その裏側にある想いがトークンを使うことで巡る世界。自分のラーメンに費やす熱量がコミュニティに承認される。自分がほんとにいいと思って作った食べ物がコミュニティで広まる。Verooは単なるSNSアプリではなく、クリエイターたちの想いが紡がれるソーシャルグルメアプリです。

Homepage: https://veroo.xyz/

Discord URL：https://t.co/VoT0gpsflA

参考文献