title: How to solve "RangeError (index): Invalid value: Only valid value is 0: 1" error
body: <p>I am getting this exception I do search stackoverflow but i didnt understand how to handle this,i am just begginer to flutter playing with code and trying to understand and trying to solve.It will helpful for me if anyone help me,Thankyou in Advance.</p>
  <pre class="lang-dart prettyprint-override"><code>======== Exception caught by widgets library =======================================================
  The following RangeError was thrown building CardWithTextformfield(dirty, state: _CardWithTextformfieldState#a698e):
  RangeError (index): Invalid value: Only valid value is 0: 1
  
  The relevant error-causing widget was: 
    CardWithTextformfield file:///E:/flutter%20apps/flutter%20apps/cardview_textformfield/lib/main.dart:11:13
  When the exception was thrown, this was the stack: 
  #0      List.[] (dart:core-patch/growable_array.dart:254:60)
  #1      _CardWithTextformfieldState.cardslist (package:cardview_textformfield/main.dart:134:35)
  #2      _CardWithTextformfieldState.build (package:cardview_textformfield/main.dart:107:60)
  #3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4691:27)
  #4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4574:15)
  </code></pre>
  <p>and a red screen appears for a few seconds and then normal, I trying to generate a maximum of 4 cards and the first card visibility is true because I want the first card to be visible as soon as the screen appears and remaining card will visible when I tap on the floatingActionButton.
  below is my full code.</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
      void main() {
        runApp(App());
      }
      
      class App extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: CardWithTextformfield(),
          );
        }
      }
      
      class CardWithTextformfield extends StatefulWidget {
        const CardWithTextformfield({Key? key}) : super(key: key);
      
        @override
        _CardWithTextformfieldState createState() =&gt; _CardWithTextformfieldState();
      }
      
      class _CardWithTextformfieldState extends State&lt;CardWithTextformfield&gt;  {
      
      
        var name =&lt;TextEditingController&gt;[];
        var id =&lt;TextEditingController&gt;[];
        
      
        var addCard =2;
        bool cardOneVisibility=true;
        bool cardTwoVisibility=false;
        bool cardThreeVisibility=false;
        bool cardFourVisibility=false;
      
      
        void incrementcard(){
          setState(() {
            
            if(addCard==1){
              cardOneVisibility=true;
            }
            else if(addCard==2){
              cardOneVisibility=true;
              cardTwoVisibility=true;
            }
            else if(addCard==3){
              cardOneVisibility=true;
              cardTwoVisibility=true;
              cardThreeVisibility=true;
            }
            else if(addCard==4){
              cardOneVisibility=true;
              cardTwoVisibility=true;
              cardThreeVisibility=true;
              cardFourVisibility=true;
            }
            addCard++;
      
          });
        }
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Card with TextformField'),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: addCard&gt;=5 ? null : incrementcard,
              child: Icon(Icons.add),
            ),
            body: Container(
      
              child:SingleChildScrollView(
                child: Column(
                  children: [
                    Visibility(visible: cardOneVisibility,child: cardslist(1)),
                    Visibility(visible: cardTwoVisibility,child: cardslist(2)),
                    Visibility(visible: cardThreeVisibility,child: cardslist(3)),
                    Visibility(visible: cardFourVisibility,child: cardslist(4)),
                  ],
                ),
              ),
            ),
          );
        }
        Widget cardslist(int index){
          if(name.length &lt;= index){
            name.add(TextEditingController());
            id.add(TextEditingController());
          }
          return Card(
            margin: EdgeInsets.all(10),
            child: Container(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                          margin: EdgeInsets.all(10),
                          child: Text('Team Name: ')),
                      Expanded(child: TextFormField(
                        controller: name[index],
                          decoration: InputDecoration(hintText: 'Team Name'),
                      ),),
                      Container(
                        margin: EdgeInsets.all(10),
                        child: Text('Team Id: '),),
                      Expanded(child: TextFormField(
                        controller: id[index],
                          decoration: InputDecoration(hintText: 'Team Id'),
                      ),),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        child: Container(
                          width: 50,height: 50,
                          margin: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            color:Colors.grey,
                          ),
                          child: Center(child: Text('IT'),),
                        ),
  
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,height: 50,
                          margin: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            color: Colors.grey,
                          ),
                          child: Center(child: Text('DEV'),),
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,height: 50,
                          margin: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            color: Colors.grey,
                          ),
                          child: Center(child: Text('TEST'),),
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,height: 50,
                          margin: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            color: Colors.grey,
                          ),
                          child: Center(child: Text('HR'),),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          );
        }
      }
  </code></pre>