how to delete a specific grid in flutter?

Issue

I want to delete any grid by double tap from the code given below. I stuck here and i am new to flutter. please, help me. Here is my code:

import 'dart:html';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Garden",
      home: new Home(),
      theme: new ThemeData(primaryColor: Colors.deepOrange),
    );
  }
}

class Home extends StatefulWidget {
  _Homesatate createState() => new _Homesatate();
}

class _Homesatate extends State<Home> {
  @override
  Widget build(BuildContext context) {
    var trees = [
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "m",
      "n",
      "o",
      "x",
      "apple",
      "neem",
      "mango",
      "banana",
      "guava",
      "berry",
      "litchi",
      "apple",
      "neem",
      "mango",
      "banana",
      "guava",
      "berry",
      "litchi",
      "n",
      "o",
      "x",
      "m",
      "n"
    ];
    var gridview = new GridView.builder(
      itemCount: trees.length,
      gridDelegate:
          new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
      itemBuilder: (BuildContext context, int index) {
        return new GestureDetector(
          child: new Card(
            elevation: 5.0,
            child: new Container(
              alignment: Alignment.center,
              margin: new EdgeInsets.all(2.0),
              child: new Text(trees[index]),
            ),
          ),
          onTap: () {
            showDialog(
                builder: (context) => new CupertinoAlertDialog(
                      title: new Column(
                        children: <Widget>[
                          new Text("GridView"),
                          new Icon(
                            Icons.favorite,
                            color: Colors.red,
                          )
                        ],
                      ),
                      content: new Text(trees[index]),
                      actions: <Widget>[
                        new FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: new Text("Ok"))
                      ],
                    ),
                barrierDismissible: false,
                context: context);
          },
          onDoubleTap: () {
            Visibility(
              visible: false,
              child: 
            );
          },
        );
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Garden"),
      ),
      body: gridview,
    );
  }
}

void main(List<String> args) {
  runApp(MyApp());
}

here, i want to delete any grid by double clicking. Here, single click wil show the content of grid. I am mostly stuck in these area:

onDoubleTap: () {
            Visibility(
              visible: false,
              child: 
            );
          } 

so, anyone please help me. specially, i don’t understand what to do with the child in the double tap portion.

Solution

In Flutter, the UI is the result of your state. So to change the UI, you’ll need to handle state. Right now, all cells are always visible.

I would suggest changing the trees from just a String to an object with two properties, like ‘name’ and ‘visible’.

class Tree {
  String name;
  bool visible;

  Tree(this.name, this.visible);
}

Then you could define your list like:

var trees = [
  Tree('apple', true),
  Tree('mango', true),
  // etc
];

The important thing is to define this outside of the build method, so it would be part of your state.

You can then wrap a Visibility widget around the Card and pass in the visible property of the specific Tree object.

class _HomeState extends State<Home> {

  var trees = [
    Tree('apple', true),
    Tree('mango', true),
    // etc
  ];

  @override
  Widget build(BuildContext context) {
    var gridview = new GridView.builder(
      itemCount: trees.length,
      gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
      itemBuilder: (BuildContext context, int index) {
        return new GestureDetector(
          child: new Visibility(
            visible: trees[index].visible,
            child: new Card(
              // etc...
  }

}

Then in the onDoubleTap, you toggle the visibility via setState

onDoubleTap: () => setState(() {
  trees[index].visible != trees[index].visible;
}),

Answered By – dumazy

Answer Checked By – Timothy Miller (FlutterFixes Admin)