我们的 app 不仅要把信息展示给用户，还要和用户进行交互。怎么响应用户的点击，拖动等操作行为呢？ 我们使用GestureDetectorWidget！

我们来实现一个按钮，当用户点击的时候显示 snackbar 消息。要怎么做呢？

步骤

• 创建一个按钮。

• 用 GestureDetector 包裹按钮，并传入 onTap 回调函数。

// Our GestureDetector wraps our button
GestureDetector(
  // 当它的子元素被点击，显示一个 snackbar (When the child is tapped, show a snackbar)
  onTap: () {
    final snackBar = SnackBar(content: Text("Tap"));
    Scaffold.of(context).showSnackBar(snackBar);
  },
  // 这个是我们的自定义按钮 (Our Custom Button!)
  child: Container(
    padding: EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Theme.of(context).buttonColor,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Text('My Button'),
  ),
);

注意

• 如果你想添加点按涟漪效果 (Material Design) 请参考文章“添加点按涟漪效果 (Material Design)”。

• 这里为了说明原理，我们创建了自定义的按钮，其实 Flutter 已经为我们准备了很多现成的按钮供我们使用： RaisedButton， FlatButton， 和 CupertinoButton 等。

完整代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Gesture Demo';
    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}
class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(child: MyButton()),
    );
  }
}
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Our GestureDetector wraps our button
    return GestureDetector(
      // When the child is tapped, show a snackbar
      onTap: () {
        final snackBar = SnackBar(content: Text("Tap"));
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // Our Custom Button!
      child: Container(
        padding: EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Text('My Button'),
      ),
    );
  }
}