gridview.count giving range error in flutter

Question

error image

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
var items = [
 "https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/1.jpeg",
 "https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/2.jpeg",
 "https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/3.jpeg",
 "https://raw.githubusercontent.com/AmmarMohib/Economic-app/master/lib/4.jpeg"
];
var text =[
  "Iphone 12",
  "Iphone 12",
  "Iphone 12",
  "Iphone 12",
];
var reviews =[
  "5.0 (23 reviews)"
  "5.0 (23 reviews)"
  "5.0 (23 reviews)"
  "5.0 (23 reviews)"
];
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
          debugShowCheckedModeBanner: false,
      title: "Economic app",
     home: Home(),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
  debugShowCheckedModeBanner: false,
      home: Scaffold(
                
        appBar: AppBar(title: Text("Economic app",style: TextStyle(color: Colors.black,fontFamily: 'Lobster',fontWeight: FontWeight.w600,fontSize: 30),),     
        actions: <Widget>[
    IconButton(
      icon: Icon(
        Icons.notifications_active,
        color: Colors.black,
      ),
      onPressed: () {
        print(Text("hello"));
      },
    )
  ],centerTitle: true,backgroundColor: Colors.white,
        ),
        body:GridView.count(
                    childAspectRatio: (45/15),

          crossAxisCount: 1,
          mainAxisSpacing: 7.5,
          children: List.generate(items.length , (index) {
         return Padding(
           padding: const EdgeInsets.only(left:20.0,right: 20.0,top: 20.0),
           child:ClipRRect(
             borderRadius: BorderRadius.circular(10),
             child: Container(
                color: Colors.white,
                child: Center(child: Column(
                  children: [
                    GridTile(
                    child: Title(
                      color: Colors.red,
                      child: Row(
                       children: [
                         ClipRRect(
             borderRadius: BorderRadius.circular(10),
                           child:
                          Image.network(items[index],height: 110,)
                         ),
                         Padding(
                           padding: const EdgeInsets.only(bottom:75.0,left: 10),
                           child: Text(text[index],style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                         ),
    // IconButton(
    //   icon: Icon(
    //   Icons.star_border_purple500,
    //     color: Colors.yellow,
    //   ),
    //   onPressed: () {
    //   },
    // ),
           Text(reviews[index])
                       ], 
                      )
                    )),
                  ])
                ),
                ),
              ),
           );
          })
          )
      ), 
    );
  }
}

this is my code, I want to implement the text throw the grid view count, I have done it at top but when I implement at bottom it threws range error that Index out of range Index shouled be less than 1:1,
I have tried a lot but it threw this error, please help I think that you will understand my problem

Answer 1

Problem is likely being caused by this Text(reviews[index]). And for your gridview, you are referencing the length based on items.length. If the length of items does not equal the length of reviews, you will get such error. Try commenting out this text widget.

This is causing your problem:

 var reviews = [
    "5.0 (23 reviews)"
        "5.0 (23 reviews)"
        "5.0 (23 reviews)"
        "5.0 (23 reviews)"
  ];

The length of this list is 1. Fix it by adding commas:

 var reviews = [
        "5.0 (23 reviews)",
        "5.0 (23 reviews)",
        "5.0 (23 reviews)",
        "5.0 (23 reviews)"
  ];