image - 我怎样才能在 Flutter 中做一个像 Instagram 一样的图像选择器？

Question

我现在得到的是显示图库中的图像列表和一个选择图像并然后在半屏中显示的按钮。我想知道是否有某种方法可以将这些图库图像从新到旧排序，然后在用户选择它时以半屏显示。就像 Instagram 应用程序一样。 我用来选择图像的插件是 image_picker: ^0.6.1+11，用于裁剪图像的插件是 image_cropper: ^1.2.3，以获取列表图库中的图像为 image_gallery: ^1.2.0。 Instagram Example 我的代码:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File _image;

  getImageFile(ImageSource source) async {
    //
    var image = await ImagePicker.platform.pickImage(source: source);
    File cropppedFile = await ImageCropper.cropImage(
      sourcePath: image.path,
      aspectRatio: CropAspectRatio(ratioX: 1.0, ratioY: 1.0),
      maxHeight: 512,
      maxWidth: 512,
    );
    setState(() {
      _image = cropppedFile;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Crop"),
      ),
      body: SafeArea(
        child: Column(children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 2.2,
            child: Center(
              child: _image == null
                  ? Text("Image")
                  : Image.file(
                      _image,
                      height: 200,
                      width: 200,
                    ),
            ),
          ),
          Expanded(child: BuildGrid()),
        ]),
      ),
      floatingActionButton: Row(
        children: <Widget>[
          FloatingActionButton.extended(
            label: Text("Photo"),
            heroTag: UniqueKey(),
            icon: Icon(Icons.camera),
            onPressed: () => getImageFile(ImageSource.camera),
          ),
          FloatingActionButton.extended(
            label: Text("Galery"),
            heroTag: UniqueKey(),
            icon: Icon(Icons.photo_library),
            onPressed: () => getImageFile(ImageSource.gallery),
          ),
        ],
      ),
    );
  }
}

import 'dart:io';
import 'dart:async';
import 'dart:collection';
import 'package:flutter/services.dart';
import 'package:image_gallery/image_gallery.dart';

import 'package:flutter/material.dart';

class BuildGrid extends StatefulWidget {
  @override
  _BuildGridState createState() => _BuildGridState();
}

class _BuildGridState extends State<BuildGrid> {
  Map<dynamic, dynamic> allImageInfo = new HashMap();
  List allImage = new List();
  List allNameList = new List();

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

  Future<void> loadImageList() async {
    Map<dynamic, dynamic> allImageTemp;
    allImageTemp = await FlutterGallaryPlugin.getAllImages;
    print(" call $allImageTemp.length");

    setState(() {
      this.allImage = allImageTemp['URIList'] as List;
      this.allNameList = allImageTemp['DISPLAY_NAME'] as List;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
        maxCrossAxisExtent: 150.0,
        // padding: const EdgeInsets.all(4.0),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        children: _buildGridTileList(allImage.length));
  }

  List<Container> _buildGridTileList(int count) {
    return List<Container>.generate(
        count,
        (int index) => Container(
                child: new Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Image.file(
                  File(allImage[index].toString()),
                  width: 96.0,
                  height: 96.0,
                  fit: BoxFit.contain,
                ),
                Text(allNameList[index])
              ],
            )));
  }
}

Answer 1

有一个非常好的包，它可以从存储中获取最新的图像:

https://github.com/aloisdeniel/media_gallery

获取最新图像(按日期)

    // Get all collections
    final List<MediaCollection> collections =
        await MediaGallery.listMediaCollections(
      mediaTypes: [MediaType.image, MediaType.video],
    );
    final allImages = collections[0]
    // Get images from "all" collection
    final imagePage = await allImages.getMedias(
      mediaType: MediaType.image,
      take: 50,
    );

来自项目