flutter - 使用 onTap (Inkwell) 打开/预览卡片

Question

我试图在 Inkwell 中使用 onTap 打开/预览现有卡片，但不确定如何执行此操作，现在我只是让它打印“你好”

  body: Container(
    color: Colors.indigo,
    child: Column(
      children: <Widget>[
        Flexible(
          child: FirebaseAnimatedList(
            query: databaseReference,
            itemBuilder: (
                _, DataSnapshot snapshot,
                Animation<double> animation, int index) {
              return Card(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: InkWell(
                    child: ListTile(
                      title: Text(
                          boardMessages[index].subject,
                      style: TextStyle(fontWeight: FontWeight.bold
                      ),),
                    ),
                    onTap: (){
                      print('hello');
                    },
                  ),
                ),
              );
            },
           ),
          ),
         ],
        ),

编辑:感谢提供的文档，我知道如何使用全屏页面来完成它，我将如何使用对话框来完成它？非常感谢

Answer 1

在您的 onTap 抽屉项目上执行此操作:

onTap: () {
   Navigator.pop(context);
   _showDialog(text: 'Index $index');
}

并使用以下代码显示带有必要文本的对话框:

void _showDialog({@required String text}) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
          elevation: 0,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: IntrinsicWidth(
              child: IntrinsicHeight(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      "Custom Alert Dialog",
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text(
                      text,
                      style: TextStyle(
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: FlatButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text("OK"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

如果可以根据您的任何需求进行完全定制。