How to implementing detail layouts in flutter

See more:

Dart

Flutter

Hello, how to impenting detail layout in Flutter?

I have build code which looks like this:

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

class MyApp extends StatelessWidget {
  List<Map<String, dynamic>> apiresult = [
    {'N#': '1', 'user_id': 'ida1b2c34', 'added_at': 'today'},
    {'N#': '2', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
    {'N#': '3', 'user_id': 'ida5b6c78', 'added_at': 'last year'},
    {'N#': '4', 'user_id': 'ida5b6c78', 'added_at': 'last sentury'},
    {'N#': '5', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
    {'N#': '6', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(16.0),
          children: [
            Text(""),
            ...apiresult.map<SlidableTile>((item) => SlidableTile(
                  number: item['N#'],
                  title: item['user_id'],
                  subtitle: item['added_at'],
                )),
          ],
        ),
      ),
    );
  }
}

class SlidableTile extends StatelessWidget {
  final String number;
  final String title;
  final String subtitle;
  const SlidableTile({
    Key key,
    this.title,
    this.subtitle,
    this.number,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      // delegate: SlidableDrawerDelegate(), seems like this is deprecated
      actionExtentRatio: 0.25,
      child: Container(
        color: Colors.white,
        child: ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.indigoAccent,
            child: Text(number),
            foregroundColor: Colors.white,
          ),
          title: Text('Tile $title'),
          subtitle: Text('SlidableDrawerDelegate $subtitle'),
        ),
      ),
      actions: <Widget>[
        IconSlideAction(
          caption: 'Archive',
          color: Colors.blue,
          icon: Icons.archive,
          onTap: () => print('Archive'),
        ),
        IconSlideAction(
          caption: 'Share',
          color: Colors.indigo,
          icon: Icons.share,
          onTap: () => print('Share'),
        ),
      ],
      secondaryActions: <Widget>[
        IconSlideAction(
          caption: 'More',
          color: Colors.black45,
          icon: Icons.more_horiz,
          onTap: () => print('More'),
        ),
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => print('Delete'),
        ),
      ],
    );
  }
}

Now i want to add a detail page and i know how to do this basicly.
The problem is i dont know how to add this to my IconSlideAction.

This is the code for the detailed page:

class ItemDetails extends StatelessWidget {
  ItemDetails({@required this.item});
  final Item item;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final content = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          item.title,
          style: textTheme.headline,
        ),
        Text(
          item.subtitle,
          style: textTheme.subhead,
        ),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(item.title),
      ),
      body: Center(child: content),
    );
  }
}

I hope you can help me, stuck at this for about 1,5 days now.
Thanks!!!

What I have tried:

I tried to solve it with lots of tutorials and searching on google, but stuck at this...