title: RangeError (index): Invalid value: Not in range 0..3, inclusive: 4 in Flutter
body: <p>I am getting a range error while running my code.
  I just want to show the items on my home screen but it is showing an error. Please help me. Thank you very much in advance. I don't know where I am getting this error. Here is my error output.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Exception caught by widgets library ═══════════════════════════════════════════════════════
  The following RangeError was thrown building HomeScreen(dirty, dependencies: [MediaQuery, _InheritedTheme, _LocalizationsScope-[GlobalKey#4b453]]):
  RangeError (index): Invalid value: Not in range 0..3, inclusive: 4
  
  The relevant error-causing widget was: 
    HomeScreen file:///C:/Project/ur_info/lib/WelcomeScreen/WelcomeScreen.dart:56:45
  When the exception was thrown, this was the stack: 
  #0      List.[] (dart:core-patch/growable_array.dart:146:60)
  #1      HomeScreen.build (package:urinfo/Home/home.dart:72:45)
  #2      StatelessElement.build (package:flutter/src/widgets/framework.dart:4576:28)
  #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4502:15)
  #4      Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
  ...</code></pre>
  </div>
  </div>
  </p>
  <p>Here is My Code</p>
  <p><strong>Home.Dart</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import 'package:flutter/widgets.dart';
  import 'package:flutter/material.dart';
  import 'package:urinfo/Home/items.dart';
  
  import 'Events.dart';
  import 'categories.dart';
  
  class HomeScreen extends StatelessWidget {
    final url;
    final Events events;
  
    const HomeScreen({Key key, this.url, this.events}) : super(key: key);
    @override
    Widget build(BuildContext context) {
      var size = MediaQuery.of(context).size;
      return SafeArea(
        child: Scaffold(
          backgroundColor: Colors.pink[50],
          body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.pink[50]
              ),
              child: Padding(
                padding: EdgeInsets.only(left: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: &lt;Widget&gt;[
                    SizedBox(height: size.height*0.05 ),
                    Center(
                      child: RichText(
                        text: TextSpan(
                          style: Theme.of(context).textTheme.headline5,
                          children: [
                            TextSpan(text: "Hello Welcome Back Pratul", style: TextStyle(fontWeight: FontWeight.bold))
                          ]
                        ),
                      ),
                    ),
                    SizedBox(height: 10),
                    Center(child: Text("Categories", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.indigo),)),
                    SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Padding(
                        padding: EdgeInsets.only(top: 10),
                        child: Row(
                          children: &lt;Widget&gt;[
                            Categories (
                              name: "Btech", imageurl: "assets/icons/Btech.svg",),
                            Categories (
                              name: "BA Hons.", imageurl: "assets/icons/Bahons.svg",),
                            Categories (
                              name: "Pharmacy", imageurl: "assets/icons/nursing.svg",),
  
                            Categories (
                              name: "Business", imageurl: "assets/icons/Business.svg",),
  
                          ],
                        ),
                      ),
                    ),
                    SizedBox(height: size.height*.12,),
                    Center(child: Text("Upcomming Events", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.indigo),)),
                    SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 15, right: 10),
                        child: Row(
                          children: &lt;Widget&gt;[
                            Events(item: items[items.length]),
                            SizedBox(width: 15)],
                        ),
                      ),
                    )
  
                  ],
                ),
              ),
            ),
          ),
  
          ),
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Events.Dart</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'package:urinfo/webview.dart';
  
  import 'items.dart';
  
  class Events extends StatelessWidget {
  final Item item;
  
    const Events({Key key, this.item}) : super(key: key);
  @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: (){
          Navigator.push(context, MaterialPageRoute(builder: (context)=&gt; Webview()));
        },
        child: Container(
          width: 120,
          height: 170,
          child: Stack(
            children: &lt;Widget&gt;[
              Container(
                height: 150,
                decoration: BoxDecoration(
                    color: item.color,
                    borderRadius: BorderRadius.circular(20)
                ),
  
              ),
              Column(
                children: &lt;Widget&gt;[
                  Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20)
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(top: 5, left: 5, right: 5),
                      child: Image.asset(item.imageurl, fit: BoxFit.cover, width: 100,),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text(item.name, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, color: Colors.white),)),
                  )
                ],
              ),
            ],
          ),
        ),
      );
  
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Items.dart</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import 'package:flutter/material.dart';
  
  class Item {
    final String imageurl, name, weburl;
    final int id;
    final Color color;
  
    Item({this.color, this.imageurl, this.name, this.weburl, this.id});
  }
  List&lt;Item&gt; items=[
    Item(
      id: 0,
      imageurl: "assets/images/Dexterix.jpg",
      name: "Dexterix",
      weburl: "https://dexterix.tech/",
      color: Colors.black,
  
    ),
    Item(
      id: 1,
      imageurl: "assets/images/space apps.jpg",
      name: "Space Apps",
      weburl: "https://dexterix.tech/",
      color: Colors.black,
  
    ),
    Item(
      id: 2,
      imageurl:"assets/images/books.jpg",
      name: "Books Show",
      weburl: "https://dexterix.tech/",
      color: Colors.yellow[200],
  
    ),
    Item(
      id: 3,
      imageurl: "assets/images/SIH.png",
      name: "SIH",
      weburl: "https://dexterix.tech/",
      color: Colors.white10,
  
    ),
  ];</code></pre>
  </div>
  </div>
  </p>
  <p><strong>WelcomeScreen.dart</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'package:flutter/widgets.dart';
  import 'package:introduction_screen/introduction_screen.dart';
  
  import '../Home/home.dart';
  
  class WelcomeScreen extends StatefulWidget {
    @override
    _WelcomeScreenState createState() =&gt; _WelcomeScreenState();
  }
  
  class _WelcomeScreenState extends State&lt;WelcomeScreen&gt; {
    List&lt;PageViewModel&gt; getPages() {
      return [
        PageViewModel(
            image: Image.asset("assets/images/Welcom.png"),
            title: ('Welcome To Ur Info'),
            body: "Your Own Info App",
            footer: Text("Lets Get Started"),
            decoration: PageDecoration(pageColor: Colors.lightBlue[50])
        ),
        PageViewModel(
            image: Image.asset("assets/images/Exams.png"),
            title: ('Get Your Exams Details'),
            body: "Download your admit cards &amp; other details",
            footer: Text(""),
            decoration: PageDecoration(pageColor: Colors.green[100])
  
        ), PageViewModel(
            image: Image.asset("assets/images/Events.png"),
            title: ('Track all the upcomming Events'),
            body: "No need to worry about events",
            footer: Text(""),
            decoration: PageDecoration(pageColor: Colors.yellow[50])
  
        ), PageViewModel(
          image: Image.asset("assets/images/study.png"),
          title: ('Daily Feeds on Exams &amp; Syllabus'),
          body: "Provides daily news related to education",
          footer: Text(""),
  
        ),
      ];
    }
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: Scaffold(
            body: IntroductionScreen(
              globalBackgroundColor: Colors.pink[50],
              pages: getPages(),
              onSkip: (){
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =&gt; HomeScreen()
                    ));
              },
              onDone: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =&gt; HomeScreen()
                    ));
              },
              showSkipButton: true,
              showNextButton: true,
              dotsDecorator: DotsDecorator(
                color: Colors.pink,
                activeColor: Colors.blueAccent[700],
              ),
              dotsFlex: 1,
              skip: Text('Skip'),
              next: Text('Next'),
              done: Text('Get Started'),
            )
  
        ),
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>