image - 我如何在 Flutter 中做一个像 Instagram 一样的图像选择器?
问题描述
我现在得到的最远的是显示来自画廊的图像列表和一个选择图像然后以半屏显示的按钮。我想知道是否有某种方法可以将这些画廊图像从新到旧排序,然后在用户选择它时以半屏显示。就像 Instagram 应用程序一样。我用来选择图像的插件是image_picker: ^0.6.1+11
,裁剪图像是image_cropper: ^1.2.3
,从图库中获取图像列表是image_gallery: ^1.2.0
。
Instagram 示例
我的代码:
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])
],
)));
}
}
解决方案
有一个非常好的包,它可以从存储中获取最新的图像:
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,
);
从项目
推荐阅读
- go - 协议缓冲区文件中使用的 go_package 选项是什么?
- oracle-apex - oracle apex 20 - 级联值列表不起作用,例如复选框组
- python - 在 pandas 数据框中找到摆动模式
- google-sites - Google 协作平台外部链接
- oracle - 在 oracle ORA-06550 中执行过程出现问题
- visual-studio-code - 如何让 ctrl 识别下划线
- android - Android 11后台位置权限“仅在使用应用程序时允许”不授予权限
- sftp - 如何使用 WinSCP 命令获取具有不同结尾名称的多个文件
- laravel-8 - 如何在注册的确切时刻为用户附加不同的角色?
- css - 在 flex 中放置和缩放元素时出错