I have created a variable

List<Xfile> imageList;

using this variable I have showed the selected images in GridView.Builder and uploaded them.

But I want to store those uploaded images in this List to show them again in GridView.Builder.

Means How to store images from imageUrls in List

How can I achieve this?

CodePudding user response：

Follow as follows:

Variables

    final picker = ImagePicker();
 File? file;
  XFile? pickedImage;
  bool isLoading = false;
  List<File?> fileList = [];

Method to select image from gallery

Future pickImageFromGallery() async {
    pickedImage = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      file = File(pickedImage!.path);
      fileList.add(file);
    });
  }

And place in gridview as follows:

GridView.builder(
    itemCount: fileList.length,
  
    gridDelegate:
        const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
    itemBuilder: (BuildContext context, int i) {
      return Container(
        padding: const EdgeInsets.all(10),
        child: Stack(
          children: <Widget>[
            SizedBox(
              height: 100,
              width: 100,
              child: Image.file(File(fileList[i]!.path),fit: BoxFit.cover,),
            ),
            Positioned(
                right: 1,
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      dltImages(fileList[i]);
                    });
                  },
                  child: const Icon(Icons.cancel, color: Colors.red),
                ))
          ],
        ),
      );
    },
  ),

Find full code at: https://github.com/nbnD/image_picker_flutter/blob/master/lib/homepage.dart

CodePudding user response：

I do like this if there is multi images upload

class PickImagesPage extends StatefulWidget {
  const PickImagesPage({super.key, required this.initialUrls});
  final List<String> initialUrls;
  @override
  State<PickImagesPage> createState() => _PickImagesPageState();
}

class _PickImagesPageState extends State<PickImagesPage> {
  @override
  void initState() {
    urls = widget.initialUrls;
    super.initState();
  }

  List<String> urls = [];
  List<File> files = [];
  List<String> removedUrls = [];

  final Repo repo = Repo();
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme;
    final scheme = theme.colorScheme;
    return LoadingLayer(
      child: Scaffold(
        bottomNavigationBar: Padding(
          padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
          child: ElevatedButton(
            onPressed:
                files.isNotEmpty || widget.initialUrls.length != urls.length
                    ? () async {
                        try {
                          await repo.uploadImages(
                            files: files,
                            urls: urls,
                            removedUrls: removedUrls,
                          );
                          Navigator.pop(context);
                        } catch (e) {
                          AppSnackbar(context).error(e);
                          if (kDebugMode) {
                            print(e);
                          }
                        }
                      }
                    : null,
            child: const Text(Labels.save),
          ),
        ),
        appBar: AppBar(
          title: const Text(
            Labels.ambienceImages,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            final List<XFile> pickedFiles = await pickImages();
            if (pickedFiles.isNotEmpty) {
              setState(() {
                files.addAll(pickedFiles.map((e) => File(e.path)));
              });
            }
          },
          child: const Icon(Icons.add),
        ),
        body: GridView.count(
          padding: const EdgeInsets.all(12),
          crossAxisCount: 2,
          mainAxisSpacing: 12,
          crossAxisSpacing: 12,
          children: [
            ...urls
                .map(
                  (e) => GestureDetector(
                    onTap: () {
                      setState(() {
                        urls.remove(e);
                        removedUrls.add(e);
                      });
                    },
                    child: Container(
                      clipBehavior: Clip.antiAlias,
                      decoration: BoxDecoration(
                        color: scheme.surfaceVariant.withOpacity(0.5),
                        borderRadius: BorderRadius.circular(20),
                        image: DecorationImage(
                          image: NetworkImage(e),
                        ),
                      ),
                    ),
                  ),
                )
                .toList(),
            ...files
                .map(
                  (e) => Container(
                    clipBehavior: Clip.antiAlias,
                    alignment: Alignment.topRight,
                    decoration: BoxDecoration(
                      color: scheme.surfaceVariant.withOpacity(0.5),
                      borderRadius: BorderRadius.circular(20),
                      image: DecorationImage(
                        image: FileImage(e),
                      ),
                    ),
                    child: SizedBox(
                      height: 40,
                      width: 40,
                      child: RawMaterialButton(
                        elevation: 0,
                        focusElevation: 0,
                        hoverElevation: 0,
                        shape: const CircleBorder(),
                        fillColor: theme.cardColor.withOpacity(0.5),
                        onPressed: () {
                          setState(() {
                            files.remove(e);
                          });
                        },
                        child: const Icon(Icons.remove),
                      ),
                    ),
                  ),
                )
                .toList(),
            GestureDetector(
              onTap: () async {
                final List<XFile> pickedFiles = await pickImages();
                if (pickedFiles.isNotEmpty) {
                  setState(() {
                    files.addAll(pickedFiles.map((e) => File(e.path)));
                  });
                }
              },
              child: Container(
                clipBehavior: Clip.antiAlias,
                decoration: BoxDecoration(
                  color: scheme.surfaceVariant.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Stack(
                  children: const [
                    Center(
                      child: Icon(Icons.add),
                    ),
                    PickImageLabel(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Repo {
  Future<void> uploadImages(
      {required List<String> urls,
      required List<File> files,
      required List<String> removedUrls}) async {
    List<String> newUrls = [];
    for (var file in files) {
      final url = await upload(file);
      newUrls.add(url);
    }
    for (var url in removedUrls) {
      await deleteImage(url);
    }
    await saveImages(urls   newUrls);
  }
}