Flutter 改變 GestureDetector 內 Container 焦點時的顏色

Question

我正在嘗試使用GestureDetector使用 Container 顯示按鈕，因為我不喜歡來自FlatButton或Inkwell的飛濺 animation ，我想做的是讓用戶知道何時按下或聚焦顏色Container的背景顏色較深，我在下面使用此代碼，但我知道這會在按下時改變顏色，並且在不按下時不會恢復到常規顏色。 有沒有辦法對其進行編碼，以便僅在按下或聚焦時顏色變暗，並在釋放按下時變回常規顏色。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool isTouching = true;

  handleTouch(bool confirmTouch) {
    setState(() {
      isTouching = confirmTouch;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new GestureDetector(
          onTap: () {
            handleTouch(false);
          },
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
                  height: 58,
                  width: 58,
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 28,
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(100),
                    color: isTouching == true ? Colors.green : Colors.red,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

用Listener包裹你的容器並使用onPointerDown和onPointerUp ：

Listener(
    child: Container(
        margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
        height: 58,
        width: 58,
        child: Icon(
            Icons.add,
            color: Colors.white,
            size: 28,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            color: isTouching == true ? Colors.green : Colors.red,
        ),
    ),
    onPointerDown: (event) => setState(() {
        isTouching = true;
    }),
    onPointerUp: (event) => setState(() {
        isTouching = false;
    }),
),