在Flutter中我們可以利用GestureDetector來偵測互動手勢，藉此給予適當的回饋。

GestureDetector可以從父元件管理Stateful Widget的狀態，也可以在元件本身管理。那我們應該要用哪種管理方法？這則由實際情況去判斷，也可以參考官方的建議：

• 如果是跟user data有關，例如：checkbox勾選狀態、slider的位置數據，則建議從父元件管理。
• 如果是跟介面外觀有關係，例如：動畫，則建議用元件本身管理。

GestureDetector可偵測的手勢有：

• 點擊：onTapDown、onTapUp、onTap、onTapCancel
• 雙擊：onDoubleTap
• 長按：onLongPress
• 拖動[垂直/水平]：on[Verticalon/Horizontal]DragStart、on[Verticalon/Horizontal]DragUpdate、on[Verticalon/Horizontal]DragEnd、
• 滑動：onPanStart、onPanUpdate、onPanEnd

從『元件本身』管理

需要一個StatefulWidget框架，在裡面create state：

class MyTapbox extends StatefulWidget {
  @override
  MyTapboxState createState() => MyTapboxState();
}

接著我們會需要一個布林值作為狀態判斷依據：

bool _active = false;
void _handleTap() {
  setState(() {
    _active = !_active; //state切換
  });
}

然後是主角GestureDetector Widget

GestureDetector(
  onTap: _handleTap,  //點擊Widget時切換布林值
  child: Text(
    _active ? 'Active' : 'Inactive',  //true:'Active', false:'Inactive'
    style: TextStyle(fontSize: 32.0, color: Color.fromRGBO(0, 0, 0, 1)),
  )
)

這樣就可以做出簡單的點擊切換文字的互動效果(完整Code參考)

從『父元件』管理

邏輯狀態是由父元件去控制，在父元件裡同樣需要一個布林值，然後把子元件加入：

class ParentTapState extends State<ParentTap> {
  bool _active = false;

  void _handleTap(bool newValue) {
    setState(() {
      _active = newValue; //state切換
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MyTapbox(
        active: _active,
        onChanged: _handleTap,
      ),
    );
  }
}

然後在畫面外觀的StatelessWidget加上布林變數

class MyTapbox extends StatelessWidget{
  MyTapbox({Key key, this.active: false, @required this.onChanged}) : super(key: key);
  final bool active;
  final ValueChanged<bool> onChanged;
  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return GestureDetector(...)
  }
}

父元件完整Code參考

注意！最後加入widget tree (MyApp)中的是StatefulWidget

成果