I'm confused in this. I have created a screen in with list to products data is coming from an dummy API. no I have created the cards and I want to display product details in next screen. how can I show the same product details on second screen of pressed product.

I think we need to store index of api data in a variable somehow. this is the code

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_get_api/model.dart';
import 'package:flutter_get_api/product_detail.dart';
import 'package:http/http.dart' as http;

class Details extends StatefulWidget {
  Details({Key? key}) : super(key: key);

  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  Future<Model> getProductsApi() async {
    final responce =
        await http.get(Uri.parse('https://dummyjson.com/products'));
    var data = jsonDecode(responce.body.toString());
    if (responce.statusCode == 200) {
      return Model.fromJson(data);
    } else {
      return Model.fromJson(data);
    }
  }

  var s = '\$';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      appBar: AppBar(
        backgroundColor: Color.fromARGB(255, 32, 28, 80),
        title: Text('Api Get'),
      ),
      backgroundColor: Color.fromARGB(255, 32, 28, 80),
      body: Column(
        children: [
          Expanded(
              child: FutureBuilder<Model>(
            future: getProductsApi(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data!.products!.length,
                  itemBuilder: (context, index) {
                    print(
                      snapshot.data!.products!.length,
                    );
                    return Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => ProductDetails(),
                                  ));
                            },
                            child: Container(
                              height: 100,
                              width: 500,
                              child: Card(
                                color: Color.fromARGB(255, 185, 239, 243),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.fromLTRB(
                                          10, 25, 10, 10),
                                      child: CircleAvatar(
                                        backgroundImage: NetworkImage(snapshot
                                            .data!.products![index].thumbnail!
                                            .toString()),
                                      ),
                                    ),
                                    Flexible(
                                      child: Padding(
                                        padding: const EdgeInsets.fromLTRB(
                                            8, 10, 8, 0),
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            Text(
                                              snapshot
                                                  .data!.products![index].title
                                                  .toString(),
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 17),
                                            ),
                                            Text(
                                              snapshot
                                                  .data!.products![index].brand
                                                  .toString(),
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Text(
                                              snapshot.data!.products![index]
                                                  .description
                                                  .toString(),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Text('\$'  
                                          snapshot.data!.products![index].price
                                              .toString()),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),

CodePudding user response：

Pass your selected product to the ProductDetails constructor

 Navigator.push(
  context,
  MaterialPageRoute(
  builder: (context) => ProductDetails(snapshot.data!.products[index]),));

Watch the basics here: https://docs.flutter.dev/cookbook/navigation/passing-data

CodePudding user response：

You can pass through constructor

class ProductDetails extends StatefulWidget {// can be StatelessWidget
  final data; // better use DataType like `final ModeClass data
  const ProductDetails({super.key, required this.data});

Now you can pass it like

builder: (context) => ProductDetails(snapshot.data!.products![index]),

Also you can pass with route arguments. Check more about navigation/passing-data