How to upload multiple images in flutter without affecting their resolution?

1,945 views
Skip to first unread message

Amena Deeb

unread,
Mar 5, 2020, 7:45:12 AM3/5/20
to Flutter Development (flutter-dev)
Hi flutter developers!

I'm trying to upload multiple images to a post (similar to an instagram post) where a user is able to swap between the post's images/videos. However, the resolutions of the files im uploading is really bad due to setting the width and height. I have no clue how to keep the original resolution of the files without setting height and width..  Any help would be appreciated

This is my code:

import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';

void main() => runApp(new AddPost());

class AddPost extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<AddPost> {
List<Asset> images = List<Asset>();
String _error = 'No Error Dectected';
var width;
var height;

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

Widget buildGridView() {


return GridView.count(
crossAxisCount: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
return AssetThumb(
asset: asset,

width: 300,
height: 300,
);
}),
);
}

Future<void> loadAssets() async {
List<Asset> resultList = List<Asset>();


List<File>fikles=List<File>();
String error = 'No Error Detected';
try {

resultList = await MultiImagePicker.pickImages(
maxImages: 6,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Example App",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);

for(Asset i in resultList){
print(i.name+" "+i.getByteData().toString());
}
} on Exception catch (e) {
error = e.toString();
}

// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;

setState(() {
images = resultList;
_error = error;
});
}

@override
Widget build(BuildContext context) {

return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Plugin example app'),
),
body: Column(
children: <Widget>[
Center(child: Text('Error: $_error')),
RaisedButton(
child: Text("Pick images"),
onPressed: loadAssets,
),
Expanded(
child: buildGridView(),
)
],
),
),
);
}
}

nagulan S

unread,
May 30, 2020, 4:43:01 AM5/30/20
to Flutter Development (flutter-dev)
I am facing the same issue bro. If you have found a solution, please share it with me.

Kuti Gbolahan

unread,
Jul 21, 2020, 9:04:57 AM7/21/20
to Flutter Development (flutter-dev)
Please did you get a solution to this?
Reply all
Reply to author
Forward
0 new messages