hi am working on a flutter app and i have a list that i already made and i need to make it that when the user press on one of the list it takes him to a new page where it show him the details of that object and i have no idea how to do it if anyone can help me please

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:myapp2/SR.dart';
import 'package:myapp2/main.dart';
import 'package:myapp2/second.dart';
import './Classes/demandes.dart';
import './SR_details.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DataFromAPI(),
    );
  }
}

class DataFromAPI extends StatefulWidget {
  @override
  _DataFromAPIState createState() => _DataFromAPIState();
}

List<Attributes> MyAllData = [];

class _DataFromAPIState extends State<DataFromAPI> {
  @override
  void initState() {
    super.initState();
  }

  Future<List<Sr>> loadData() async {
    try {
      var response = await http.get(Uri.parse(
          'http://192.168.1.30:9080/maxrest/rest/mbo/sr/?_lid=azizl&_lpwd=max12345m&_format=json'));
      if (response.statusCode == 200) {
        final jsonBody = json.decode(response.body);
        Demandes data = Demandes.fromJson(jsonBody);
        final srAttributes = data.srMboSet.sr;
        return srAttributes;
      }
    } catch (e) {
      throw Exception(e.toString());
    }
    throw Exception("");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text('Liste des Demandes'),
        ),
        body: FutureBuilder<List<Sr>?>(
          future: loadData(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            } else {
              return new ListView.builder(
                  itemCount: snapshot.data?.length,
                  itemBuilder: ((_, index) {
                    return new ListTile(
                        title: new Card(
                          child: new ListTile(
                            title: new Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                new Text(
                                    'Ticket ID  : ${snapshot.data![index].attributes.ticketid.content}'),
                                new Text(
                                    'status  : ${snapshot.data![index].attributes.status.content}'),
                                new Text(
                                    'reportedby  : ${snapshot.data![index].attributes.reportedby.content}'),
                                new Text(
                                    'Status Date  : ${snapshot.data![index].attributes.statusdate.content}'),
                              ],
                            ),
                          ),
                        ),
                        onTap: () => Navigator.of(context).push(
                              new MaterialPageRoute(
                                builder: (BuildContext context) =>
                                    new SrDetailsScreen(detailsScreen:),
                              ),
                            ));
                  }));
            }
          },
        ),
      ),
    );
  }
}

and this is the page where i want the data to be showen

import 'package:flutter/material.dart';
import './Classes/demandes.dart';

class SrDetailsScreen extends StatelessWidget {
  final SrDetailsScreen detailsScreen;
  const SrDetailsScreen({Key? key, required this.detailsScreen})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Deatil de SR num "),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Padding(
                  padding: EdgeInsets.all(8.0), child: Text('Ticket ID '))
            ],
          ),
        ));
  }
}

CodePudding user response：

You can surround your ListTile Item with a GestureTap or InkWill Widget and when you tap on your list tile you can send the id of your item to the next page with page parameters for example:

Navigator.of(context).push(
                              new MaterialPageRoute(
                                builder: (BuildContext context) =>
                                    new SrDetailsScreen(id:itemId),
                              ),
                            ));

and in the next page you can reach to your data by id!

CodePudding user response：

1. Make your SrDetailsScreen to be able to receive Sr type object

import 'package:flutter/material.dart';
import './Classes/demandes.dart';

class SrDetailsScreen extends StatelessWidget {

  final Sr sr;
  const SrDetailsScreen({Key? key, required this.sr})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          //this is a mock code just to show you can show value of your sr's field like this
          title: const Text(sr.title),
        ),
        body: ...);
  }
}

2. And then pass your sr object which you want to show its details

Navigator.of(context).push(
    new MaterialPageRoute(
    builder: (BuildContext context) =>
        new SrDetailsScreen(sr: snapshot.data![index]),
       ),
    )
);

CodePudding user response：

you can use navigate with arguments https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments