Flutter: How to put button on each image like (x) to cancel selected image

Question

I am using multi_image_picker 4.6.1 in my application but I faced little problem. How to organize images on specific place on the page and put cancel button on each selected image so user can cancel or remove selected image one by one like in picture here. Thanks in advance

here is the code i am using

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

import 'package:multi_image_picker/multi_image_picker.dart';

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

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

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

  @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>();
    String error = 'No Error Dectected';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } 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(),
            )
          ],
        ),
      ),
    );
  }
}

Solution 1

You can try using Stack https://www.youtube.com/watch?v=liEGSeD3Zt8&vl=en

return Stack(
  children: <Widget>[
    AssetThumb(
      asset: asset,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 0,
      right: 0,
      child: GestureDetector(
          onTap: (){
            print('delete image from List');
              setState((){
                print('set new state of images');
              })
          },
          child: Icon(
        Icons.delete,
      ),
     ),
    ),
  ],
);

Solution 2

Another way to fix using Stack

Stack(
        children: <Widget>[
          AssetThumb(
            asset: asset,
            width: 300,
            height: 300,
          ),
          Positioned(
              right: -2,
              top: -9,
              child: IconButton(
                  icon: Icon(
                    Icons.cancel,
                    color: Colors.black.withOpacity(0.5),
                    size: 18,
                  ),
                  onPressed: () => setState(() {
                    images.removeAt(index);
                  })))
        ],
      );

Comments

[Muhammad Amin]

I am sorry I am newbie on programming. But can you explain me how can i cancel image with this button. I could not write a function for it.

[Ciprian]

I would remove the image from the List based on its index

[Istiaque Ahmed]

@Ciprian, how do you get index inside onTap to remove the image from List ?

[Ciprian]

Just the way OP does it. I just suggested using Stack. See this line: Asset asset = images[index];