Dynamic list of image in row with wrap (no space between) that allow for Long-pressing an image to open Edit options - Flutter

Question

I'm receiving a list of images that I want to display dynamically in rows of 4 items each row. If there are 5 itens the row should wrap. The thing is, I need the images to allow for a longpress click that opens edit buttons in the appBar. Besides the edit button when longing pressing, it should allow for multiple selecting the other images.

Could this code be adapted for that:

class cardy extends StatefulWidget {
  @override
  _cardyState createState() => new _cardyState();
}

class _cardyState extends State<cardy> {
  var isSelected = false;
  var mycolor=Colors.white;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: mycolor,
      child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        new ListTile(
            selected: isSelected,
            leading: const Icon(Icons.info),
            title: new Text("Test"),
            subtitle: new Text("Test Desc"),
            trailing: new Text("3"),
            onLongPress: toggleSelection // what should I put here,
            )
      ]),
    );
  }

  void toggleSelection() {
    setState(() {
      if (isSelected) {
        mycolor=Colors.white;
        isSelected = false;
      } else {
        mycolor=Colors.grey[300];
        isSelected = true;
      }
    });
  }
}

Answer 1

Yes, this code can be adapted for that ;)

To start, check out SliverGrid class.

https://api.flutter.dev/flutter/widgets/SliverGrid-class.html

Here is a (not complete) snippet to get you started, but you'll have to specify what options you want to use because this will not copy and paste solve your problem:

SliverGrid(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 5,
        crossAxisSpacing: 3,
        crossAxisCount,
        ),
delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Container()})),

I'll note that if you want to use the information you're gathering, namely which images you're selecting, do take care to store that information somewhere. That is, your example toggles selection for a single item, but how will you get that information later? That is, if you click 3 items then hit edit, you need a way to record which 3 items have been selected. One option is maintaining a list and .removing / .adding it as part of your toggle.