Click here to Skip to main content
14,865,126 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, how to impenting detail layout in Flutter?

I have build code which looks like this:

Dart
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:
Dart
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...
Posted
Updated 26-Mar-21 5:01am
v2
Comments
wseng 27-Mar-21 1:13am
   
you want navigate to details page?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900