Flutter: How do I select and display images

Question

I cannot display selected images from gallery in a grid. In this code, I am displaying images in a list and I want to turn it into small grid type in 1 row but I don't know how. Can you please help?

Here's my code for selecting multiple images using file picker.

FileType fileType;
String imgName, _imgPath;
Map<String, String> imgPaths;
List<File> _imgList = List();
bool isLoadingPath = false;


  _openFile() async {
setState(() => isLoadingPath = true);
try {
  _imgPath = null;
  imgPaths = await FilePicker.getMultiFilePath(
      type: fileType != null ? fileType : FileType.custom,
      allowedExtensions: ['jpg', 'png']);

  _imgList.clear();

  imgPaths.forEach((key, val) {
    print('{ key: $key, value: $val}');
    File file = File(val);
    _imgList.add(file);
  });

} on PlatformException catch (e) {
  print("Unsupported operation" + e.toString());
}
if (!mounted) return;
setState(() {
  isLoadingPath = false;
  imgName = _imgPath != null
      ? _imgPath.split('/').last
      : imgPaths != null
      ? imgPaths.keys.toString()
      : '...';
});
}

Displaying images in a list. (How to display images as it is?)

Widget _fileBuilder() {
return Builder(
  builder: (BuildContext context) => isLoadingPath
      ? Padding(
      padding: const EdgeInsets.only(bottom: 4.0))
      : _imgPath != null || imgPaths != null && (imgPaths.length > 1 && imgPaths.length < 5)
      ? new Container(
    height: imgPaths.length > 1
        ? MediaQuery.of(context).size.height * 0.15
        : MediaQuery.of(context).size.height * 0.10,
    width: MediaQuery.of(context).size.width,
    child: new Scrollbar(
        child: new ListView.separated(
          itemCount: imgPaths != null && imgPaths.isNotEmpty
              ? imgPaths.length
              : 1,
          itemBuilder: (BuildContext context, int index) {
            final bool isMultiPath = imgPaths != null && imgPaths.isNotEmpty;
            final int fileNo = index + 1;
            final String name = 'File $fileNo : ' + (isMultiPath
                ? imgPaths.keys.toList()[index]
                : _imgPath ?? '...');
            final filePath = isMultiPath
                ? imgPaths.values.toList()[index].toString()
                : _imgPath;
            return new ListTile(
              title: Transform.translate(
                offset: Offset(-25, 0),
                child: new Text(
                  name,
                ),
              ),
              leading: Icon(Icons.attach_file_outlined, color: Color(0xFFF3A494),),
              dense: true,
            );
          },
          separatorBuilder:
              (BuildContext context, int index) =>
          new Divider(),
        )),
  )
      : new Container(child: Text('4 photos is the maximum'),),
);
}

Dependencies:

file_picker: ^1.4.2
path:
mime:
async:

Answer 1

what you can do is, use the Image Picker dependency. You can find its documentation on pub.dev. after installing it, try using it and store the image uploaded in a file in the device. and with that file name, you can access the image. You can try the below code, it worked for me. Also don't forget to import dart:io; for using file.

var _storedImage;

  Future<void> _takePictureByCamera() async {
    final picker = ImagePicker();
    final imageFile =
        await picker.getImage(source: ImageSource.camera, maxWidth: 600, imageQuality: 60);

    setState(() {
      _storedImage = File(imageFile!.path);
    });

    final appDir = await path_provider.getApplicationDocumentsDirectory();
    final fileName = path.basename(imageFile!.path);
    final savedImage = File(imageFile.path).copy('${appDir.path}/$fileName');

    widget.onSelectImage(savedImage);
  }

  Future<void> _takePictureByGallery() async {
    final picker = ImagePicker();
    final imageFile =
        await picker.getImage(source: ImageSource.gallery, maxWidth: 600);

    if (imageFile == null) {
      return;
    }

    setState(() {
      _storedImage = File(imageFile.path);
    });

    final appDir = await path_provider.getApplicationDocumentsDirectory();
    final fileName = path.basename(imageFile.path);
    final savedImage = File(imageFile.path).copy('${appDir.path}/$fileName');

    widget.onSelectImage(savedImage);
  }

and after selecting or clicking the image, you can do this to display the image ->

void getImage() async {
    final pickedImage = await showModalBottomSheet(
      context: accountTabScaffoldMessengerKey.currentContext!,
      backgroundColor: Colors.transparent,
      enableDrag: true,
      // elevation: 0,
      builder: (context) => AccountImageUpdateBottomSheet(_selectImage),
    );
    _selectImage(pickedImage);
  }

  void _selectImage(File pickedImage) {
    setState(() {
      _pickedImage = pickedImage;
    });
  }

The image you selected is stored in the _pickedImage and you can access it by Image.file(_pickedImage).