having this error :type 'String' is not a subtype of type 'int' of 'index' on flutter app

Question

I am trying to fetch data from strapi to show on my flutter app. it showing type 'String' is not a subtype of type 'int' of 'index'.

I want to show the products on this product_page.dart component:

import 'package:flutter/material.dart';
import 'package:flutter_ecommerce/models/app_state.dart';
import 'package:flutter_ecommerce/widgets/product_item.dart';
import 'package:flutter_redux/flutter_redux.dart';



class ProductsPage extends StatefulWidget {
  final void Function() onInit;
  ProductsPage({this.onInit});

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

class ProductsPageState extends State<ProductsPage> {
  void initState() {
    super.initState();
    widget.onInit();
  }

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _appBar,
        body: Container(
            decoration: gradientBackground,
            child: StoreConnector<AppState, AppState>(
                converter: (store) => store.state,
                builder: (_, state) {
                  return Column(children: [
                    Expanded(
                        child: SafeArea(
                            top: false,
                            bottom: false,
                            child: GridView.builder(
                                itemCount: state.products.length,
                                gridDelegate:
                                    SliverGridDelegateWithFixedCrossAxisCount(
                                        crossAxisCount: 2),
                                itemBuilder: (context, i) =>
                                    ProductItem(item: state.products[i]))))
                  ]);
                })));
  }
}

On this component where I am trying to show each item. Product_item.dart:

import 'package:flutter/material.dart';


class ProductItem extends StatelessWidget {
  final dynamic item;
  ProductItem({this.item});



  @override
  Widget build(BuildContext context) {
    final String pictureUrl = 'http://localhost:1337${item['picture']['url']}';
    return GridTile(child: Image.network(pictureUrl, fit: BoxFit.cover));
  }
}

Answer 1

This error occurs when you are trying to use a String where it accepts an interger for the index of an array.

So, from your code, it looks like the issue could be from "item['picture']['url']"

The array would instead accept sometkhing like "item[0]" instead.... or however the array/data is built. You should check how the array is set.

If you are unsure, I'd try printing out the arrays to debug without sending it to the ProductItem widget at first.

So maybe something like the following:

child: GridView.builder(
                                itemCount: state.products.length,
                                gridDelegate:
                                    SliverGridDelegateWithFixedCrossAxisCount(
                                        crossAxisCount: 2),
                                itemBuilder: (context, i) =>
                                   {
                                        Print(state.products[i]);
                                        Print(state.products[i][0]);
                                   }
                  ]);