我如何在 Flutter 中做一个像 Instagram 一样的图像选择器？答案

【问题标题】：How could I do an image picker just like Instagram in Flutter?我如何在 Flutter 中做一个像 Instagram 一样的图像选择器？
【发布时间】：2020-12-14 07:23:54
【问题描述】：

我现在得到的只是显示来自画廊的图像列表和一个选择图像然后以半屏显示的按钮。我想知道是否有某种方法可以将这些画廊图像从新到旧排序，然后在用户选择它时以半屏显示。就像 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])
              ],
            )));
  }
}

【问题讨论】：

标签： image flutter instagram gallery picker

【解决方案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,
    );

来自项目

【讨论】：