颤动 - 更新GestureDetector Tap的视图

Question

I am trying to change the color of the element the user clicked on using a GestureDetector:

new GestureDetector(
    onTap: (){
      // Change the color of the container beneath
    },
    child: new Container(
      width: 80.0,
      height: 80.0,
      margin: new EdgeInsets.all(10.0),
      color: Colors.orange,
    ),
  ),

The problem is that I can't use setState inside of onTap. Otherwise I would have created a color variable. Any suggestions?

Answer 1

You can use setState() inside of onTap . In fact, that's exactly the right thing to do in this situation. If you are having trouble calling setState() , make sure your widget is stateful (see the interactivity tutorial ).

You might also want to check out FlatButton or InkWell as more material-y ways to capture touches. If you really want a GestureDetector , read up on HitTestBehavior to make sure you're configuring it correctly.

Here's an example that changes to a random color every time it's clicked.

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  State createState() => new _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

  final Random _random = new Random();
  Color _color = Colors.orange;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new GestureDetector(
          onTap: () {
            // Change the color of the container beneath
            setState(() {
              _color = new Color.fromRGBO(
                _random.nextInt(256),
                _random.nextInt(256),
                _random.nextInt(256),
                1.0
              );
            });
          },
          child: new Container(
            width: 80.0,
            height: 80.0,
            margin: new EdgeInsets.all(10.0),
            color: _color,
          ),
        ),
      ),
    );
  }
}