using onTap (Inkwell) to open/preview a Card

Question

Im trying to use onTap in Inkwell to open/preview an existing Card but unsure how to do this, for now I just have it printing 'hello'

  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');
                    },
                  ),
                ),
              );
            },
           ),
          ),
         ],
        ),

EDIT: I know how to do it using Full Screen Page thanks to the docs provided, how would I do this with a Dialog? Much appreciated

Answer 1

Over your onTap drawer item do this:

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

And use the following code to show a Dialog with the necessary text:

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"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

If fully customizable with any needs you'd had.