Flutter GestureDetector, onTap запускается автоматически, как?

Question

У меня есть виджет с сохранением состояния, который имеет простую сетку, и в каждой ячейке сетки есть контейнер.

Я хотел бы нажать на ячейку / контейнер и изменить его содержимое.

Проблема в том, что метод GestureDetector -> onTap запускается при обновлении приложения для всех клеток.

В приведенном ниже примере метод _changeCell запускается сразу для всех клеток, а onTap не работает.

Есть идеи?

import 'package:flutter/material.dart';

class GridWidget extends StatefulWidget {
  @override
  _GridWidgetState createState() => new _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  @override
  Widget build(BuildContext context) {

    Color cellColor = Colors.white;
    Text cellText = new Text('');

    // when a cell is tapped, change the color and text
    _changeCell(index) {
      setState(() {
        cellColor = Colors.lightBlue;
        cellText = new Text('clicked');
      });
      print("Container clicked " + index.toString());
    }

    // create a 5 by 5 grid 
    return new GridView.count(
      crossAxisCount: 5,
      children: new List.generate(5, (index) {
        return new GestureDetector(
          onTap: _changeCell(index),
          child: new Container(
            width: double.infinity,
            height: double.infinity,
            decoration: new BoxDecoration(
              color: cellColor,
            ),
            child: new Center(
              child: cellText,
            ),
          ),
        );
      }),
    );
  }
}

Answer 1

просто измените onTap: _changeCell(index) на onTap: () => _changeCell(index). _changeCell (index) возвращает null , и вы устанавливаете null в onTap и вызываете ту же функцию.

ниже код для этого

Я немного поигрался.

    import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new DemoScreen(),
  ));
}

class DemoScreen extends StatefulWidget {
  @override
  _DemoScreenState createState() => new _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  Color cellColor = Colors.white;

  Text _getText(index) {
    Text text;
    switch (index) {
      case 0:
        text = new Text('lightBlue');
        break;
      case 1:
        text = new Text('red');
        break;
      case 2:
        text = new Text('green');
        break;
      case 3:
        text = new Text('yellow');
        break;
      case 4:
        text = new Text('orange');
        break;
      default:
        text = new Text('brown');
        break;
    }

    return text;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Demo App"),
      ),
      body: new GridView.count(
        crossAxisCount: 5,
        children: new List.generate(5, (index) {
          return new MyWidget(
            index: index,
            color: cellColor,
            text: _getText(index),
          );
        }),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  final Color color;
  final Text text;
  final int index;

  MyWidget({this.color, this.text, this.index});

  @override
  _MyWidgetState createState() => new _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Color cellColor = Colors.white;
  Text cellText = new Text('white');

  @override
  void initState() {
    super.initState();
    cellColor = widget.color;
    cellText = widget.text;
  }

  _changeCell(index) {
    setState(() {
      switch (index) {
        case 0:
          cellColor = Colors.lightBlue;
          cellText = new Text('lightBlue');
          break;
        case 1:
          cellColor = Colors.red;
          cellText = new Text('red');
          break;
        case 2:
          cellColor = Colors.green;
          cellText = new Text('green');
          break;
        case 3:
          cellColor = Colors.yellow;
          cellText = new Text('yellow');
          break;
        case 4:
          cellColor = Colors.orange;
          cellText = new Text('orange');
          break;
        default:
          cellColor = Colors.brown;
          cellText = new Text('brown');
          break;
      }
    });
    print("Container clicked " + index.toString());
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () => _changeCell(widget.index),
      child: new Container(
        margin: new EdgeInsets.symmetric(horizontal: 1.0),
        width: double.infinity,
        height: double.infinity,
        decoration: new BoxDecoration(
          color: cellColor,
        ),
        child: new Center(
          child: cellText,
        ),
      ),
    );
  }
}

Надеюсь, это поможет:)

Answer 2

В вашем коде есть проблема в этой строке:

onTap: _changeCell(index),

По сути, вместо установки onTap для метода, вы вызываете метод напрямую и устанавливаете onTap для результата этого вызова (null). Каждый раз, когда создается виджет, он вызывает функцию.

Что вы должны делать, это:

onTap: () => _changeCell(index)