How can I view the details of an item in a detailed screen - Flutter

自闭症网瘾萝莉.ら 提交于 2020-07-03 13:25:12

问题


I am new to flutter this error is giving me a serious nightmare. I have a card list of items called Anchors. These items are coming from the shared preference file which belongs to the logged-in user. In the shared preference Json file, each anchor has one or more distribution centers nested to it. All in a JSON form stored in the shared Preference. Now, I was able to iterate over the anchors respectfully at the first screen but the challenge I am having is when I click on view anchor details button instead of taking me to the details page where I can view the details of that anchor and iterate over the distribution centers of that anchor it doesn't but instead it takes the whole anchors there. I tried to parse only one id to the details page so I can Iterate over the nested objects of that anchor but still its not working. The error message says: type 'int' is not a subtype of type 'List' But if I remove [i]['Oid'] from the link to the details screen it takes the whole data there. They are all on two different screens. Please can anybody help me?

JSON format of:

 "Anchors": [
    {
      "Oid": 11,
      "Name": "MAIZE ASSOCIATION OF NIGERIA",
      "Acronym": "MAAN",
      "DistributionCentres": [
        {
          "Oid": 11,
          "Name": "Logo Centre (Zone A)",
          "Address": "Private Warehouse, Ugba, Logo LGA"
        },
        {
          "Oid": 12,
          "Name": "Makurdi Centre (Zone B)",
          "Address": "Ministry of Agric, Makurdi "
        },
        {
          "Oid": 13,
          "Name": "Oturkpo Centre (Zone C)",
          "Address": "Private Warehouse, Oturkpo"
        },
        {
          "Oid": 15,
          "Name": "Borno MAAN centre",
          "Address": "Bolori Store, Flavour Mill, Behind Vita Foam, Maiduguri"
        },
        {
          "Oid": 18,
          "Name": "Bauchi Centre",
          "Address": "BASPD, Dass Road, Bauchi"
        }
      ],
      "NoOfDistributionCentres": 5
    },
    {
      "Oid": 2,
      "Name": "MAIZE GROWERS, PROCESSORS AND MARKETERS ASSOCIATION OF NIGERIA",
      "Acronym": "MAGPAMAN",
      "DistributionCentres": [
        {
          "Oid": 2,
          "Name": "Guma Centre",
          "Address": "P 32, 2nd Avenue Federal Housing Estate, N/Bank, Makurdi"
        },
        {
          "Oid": 3,
          "Name": "Logo Centre",
          "Address": "Terhemen Akema Storage Facility, Ugba, Logo LGA"
        },
        {
          "Oid": 5,
          "Name": "Oturkpo Centre",
          "Address": "Grain Store, Lower Benue Okele Project, Otukpo"
        },
        {
          "Oid": 6,
          "Name": "Gboko Centre",
          "Address": "K3 New Road, Opposite former coca cola plant. Solar Schools Street, Gboko"
        },
        {
          "Oid": 7,
          "Name": "Gwer East Centre",
          "Address": "Ahua Shardye's Warehouse, Behind Sylkan Filling Station, Ikpayongo , G/East LGA"
        },
        {
          "Oid": 8,
          "Name": "Kwande Centre",
          "Address": "KM 3, Adagi Road, Adikpo"
        },
        {
          "Oid": 9,
          "Name": "Ohimini Centre",
          "Address": "Ajoga Oglewu, Ohimini"
        },
        {
          "Oid": 10,
          "Name": "Oju Centre",
          "Address": "Behind Town Hall, Ohuhu owo, Oju LGA"
        }
      ],
      "NoOfDistributionCentres": 8
    }
  ],

Anchors Page:

import 'package:erg_app/Details.dart';
import 'package:flutter/material.dart';
import 'package:erg_app/Widgets/nav-drawer.dart';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MaterialApp(
      home: AnchorsPage(),
    ));

class AnchorsPage extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

List<Anchor> _parseAnchors(Map<String, dynamic> map) {
  final anchors = <Anchor>[];
  for (var anchorMap in map['Anchors']) {
    final anchor = Anchor.fromMap(anchorMap);
    anchors.add(anchor);
  }
  return anchors;
}

class Anchor {
  final int oId;
  final String name;
  final String acronym;
  final List<DistributionCenter> distributionCenters;

  const Anchor({
    @required this.oId,
    @required this.name,
    @required this.acronym,
    @required this.distributionCenters,
  });

  factory Anchor.fromMap(Map<String, dynamic> map) {
    final distributionCenters = <DistributionCenter>[];
    for (var distribution in map['DistributionCentres']) {
      final distributionCenter = DistributionCenter.fromMap(distribution);
      distributionCenters.add(distributionCenter);
    }

    return Anchor(
      oId: map['Oid'] as int,
      name: map['Name'] as String,
      acronym: map['Acronym'] as String,
      distributionCenters: distributionCenters,
    );
  }
}

class DistributionCenter {
  final int id;
  final String name;
  final String address;

  const DistributionCenter({
    @required this.id,
    @required this.name,
    @required this.address,
  });

  factory DistributionCenter.fromMap(Map<String, dynamic> map) {
    return DistributionCenter(
      id: map['Oid'] as int,
      name: map['Name'] as String,
      address: map['Address'] as String,
    );
  }
}


class _MyHomeState extends State<AnchorsPage> {

 var user;
 var userData;
 List anchors = [];
  @override
  void initState() {
    _getUserAnchor();
    super.initState();
  }

  _getUserAnchor() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    var userJson = localStorage.getString('loginRes');
    user = json.decode(userJson);
    setState(() {
      anchors = user['Anchors'];
    });
    print(anchors);
    setState(() {
      userData = anchors;
    });
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: Text('Anchors Details'),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      body: Container(
        padding: const EdgeInsets.fromLTRB(10, 30, 10, 10),
        child: ListView(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Icon(Icons.card_membership,
                    size: 35, color: Colors.orange[400]),
                Text(
                  'Assigned Anchors',
                  style: TextStyle(color: Colors.orange[400], fontSize: 25),
                  
                ),
              ],
            ),
            
            ListView.builder(
                shrinkWrap: true,
                itemCount: anchors.length,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int i) {
                  return Padding(
                    padding: const EdgeInsets.all(10.0),
                    ////////////// 1st card///////////

                    child: Card(
                      elevation: 4.0,
                      color: Colors.grey[100],
                      margin: EdgeInsets.only(
                          left: 10, right: 10, top: 20, bottom: 10),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Container(
                        padding: EdgeInsets.only(left: 15, top: 20, bottom: 10),
                        width: MediaQuery.of(context).size.width,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Container(
                                      width: 50.0,
                                      height: 50.0,
                                      decoration: new BoxDecoration(
                                          shape: BoxShape.circle,
                                          image: new DecorationImage(
                                              fit: BoxFit.cover,
                                              image: AssetImage(
                                                  'assets/images/user.png')))),
                                ),
                                SizedBox(
                                  width: 20,
                                ),
                                Text(
                                  anchors[i]['Acronym'],
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Color(0xFF9b9b9b),
                                    fontSize: 20,
                                    decoration: TextDecoration.none,
                                    fontWeight: FontWeight.normal,
                                  ),
                                ),
                              ],
                            ),
                            Container(width: 10),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Allocated Farmers:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 70, top: 12),
                                  child: Text(
                                    anchors[i]['Oid'].toString(),
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Validated Farmers:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 70, top: 12),
                                  child: Text(
                                    anchors[i]['Oid'].toString(),
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Non Validated Farmers:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 40, top: 12),
                                  child: Text(
                                    anchors[i]['Oid'].toString(),
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Distribution Centers:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 60, top: 12),
                                  child: Text(
                                    anchors[i]['Oid'].toString(),
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 10, top: 10),
                                  child: Text(
                                    'Daily Inventory Status:',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color(0xFF9b9b9b),
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(left: 50, top: 12),
                                  child: Text(
                                    '3',
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color:Colors.green,
                                      fontSize: 14.0,
                                      decoration: TextDecoration.none,
                                      fontWeight: FontWeight.normal,
                                      
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              height: 20,
                            ),
                            Row(
                              children: <Widget>[
                                /////////// Buttons /////////////

                                Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: FlatButton(
                                          child: Padding(
                                            padding: EdgeInsets.only(
                                                top: 8,
                                                bottom: 8,
                                                left: 10,
                                                right: 8),
                                            child: Text(
                                              'View Details',
                                              textDirection: TextDirection.ltr,
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 15.0,
                                                decoration: TextDecoration.none,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                          color: Colors.blueGrey,
                                          shape: new RoundedRectangleBorder(
                                              borderRadius:
                                                  new BorderRadius.circular(
                                                      20.0)),
                                          onPressed: () {
                                            Navigator.push(
                                                context,
                                                new MaterialPageRoute(
                                                    builder: (context) =>
                                                        detailsPage(value : anchors[i]['Oid'])));
                                          },
                                        ),
                                ),

                                /////////// End of Buttons /////////////
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                })
          ],
        ),
      ),
    );
  }
}

Details Page:




import 'package:flutter/material.dart';

class detailsPage extends StatefulWidget {
  List value;
  detailsPage({Key key, @required this.value}) : super(key: key);
  @override
  _detailsPageState createState() => _detailsPageState(value);
}

class _detailsPageState extends State<detailsPage> {
  List value;
  _detailsPageState(this.value);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Anchors Details Page"),
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      
      body: Container(
        child: ListView(
          children: <Widget>[
            Text(value[1]['Name']),
            Text(value[1]['Oid'].toString()),
            ListView.builder(
                shrinkWrap: true,
                itemCount: value[1]['DistributionCentres'].length,
                //context:context, //it saying the name parameter context is not defined
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int i) {
                  return Text(value[1]['DistributionCentres'][i]['Name']);
                })
          ],
        ),
      ),
    );
  }
}


Image of what I want to achieve below:


回答1:


first screen onPressed get the index and assigned it to variable, or you can just pass i varibale too,

     onPressed: () {
         Navigator.push(context,new MaterialPageRoute(builder: (context) =>
              detailsPage(i))); },

In detailed page

    class detailsPage extends StatefulWidget {
        final int selectedIndex;
        detailsPage(this.selectedIndex,{Key key}) : super(key: key);

       @override
        _detailsPageState createState() => _detailsPageState();
       }

place that you want to use the previous page passsed index,

    return Text(value[widget.selectedIndex]['DistributionCentres'][i]['Name']);

Hope this will help..




回答2:


The problem seems to be here

detailsPage(value : anchors[i]['Oid'])

You're passing Oid as parameter that is an Int. But look that the constructor for detailsPage

List value;
detailsPage({Key key, @required this.value}) : super(key: key);

The parameter value is a List. It's hard for me to know what you're trying to do... but you will need to fix this type mismatch.

EDIT

It seems that value parameter should be of type Map<String,dynamic>

class detailsPage extends StatefulWidget {
    Map<String, dynamic> value;
    
    detailsPage({Key key, @required this.value}) : super(key: key);

    @override
    _detailsPageState createState() => _detailsPageState(value);
}

class _detailsPageState extends State<detailsPage> {
    Map<String, dynamic> value;
    
    _detailsPageState(this.value);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Anchors Details Page"),
                iconTheme: IconThemeData(color: Colors.white),
                backgroundColor: Colors.green,
            ),            
            body: Container(
                child: ListView(
                children: <Widget>[
                    Text(value['Name']),
                    Text(value['Oid'].toString()),
                    ListView.builder(
                        shrinkWrap: true,
                        itemCount: value['DistributionCentres'].length,
                        //context:context, //it saying the name parameter context is not defined
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (BuildContext context, int i) {
                        return Text(value['DistributionCentres'][i]['Name']);
                        })
                ],
                ),
            ),
        );
    }
}

And then you should do

detailsPage(value : anchors[i])));


来源:https://stackoverflow.com/questions/62575057/how-can-i-view-the-details-of-an-item-in-a-detailed-screen-flutter

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!