How could I do an image picker just like Instagram in Flutter?

Question

The far I get now is showing a list of images from gallery and a button that picks the image and show then in half screen. I would like to know if there is some method to order those gallery images from newer to older and show then in half screen when user selects it. Just like Instagram app. The plugin I'm using to select images is image_picker: ^0.6.1+11, to crop the images is image_cropper: ^1.2.3, to get a list of images from gallery is image_gallery: ^1.2.0. Instagram Example My code:

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

Solution

There's a pretty good package, which grabs the most recent images from storage:

https://github.com/aloisdeniel/media_gallery

Get most recent images (by date)

    // 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,
    );

From project