How to solve "RangeError (index): Invalid value: Only valid value is 0: 1" error

Question

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.

======== 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)

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.

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() => _CardWithTextformfieldState();
    }
    
    class _CardWithTextformfieldState extends State<CardWithTextformfield>  {
    
    
      var name =<TextEditingController>[];
      var id =<TextEditingController>[];
      
    
      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>=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 <= 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'),),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

Answer 1

Index start from 0, not 1, need change in in your different postion. I updated code for you please have a check.

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() => _CardWithTextformfieldState();
}

class _CardWithTextformfieldState extends State<CardWithTextformfield>  {


  var name =<TextEditingController>[];
  var id =<TextEditingController>[];


  var addCard =0;
  bool cardOneVisibility=true;
  bool cardTwoVisibility=false;
  bool cardThreeVisibility=false;
  bool cardFourVisibility=false;


  void incrementcard(){
    setState(() {

      if(addCard==0){
        cardOneVisibility=true;
      }
      else if(addCard==1){
        cardOneVisibility=true;
        cardTwoVisibility=true;
      }
      else if(addCard==2){
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
      }
      else if(addCard==3){
        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>=4 ? null : incrementcard,
        child: Icon(Icons.add),
      ),
      body: Container(

        child:SingleChildScrollView(
          child: Column(
            children: [
              Visibility(visible: cardOneVisibility,child: cardslist(0)),
              Visibility(visible: cardTwoVisibility,child: cardslist(1)),
              Visibility(visible: cardThreeVisibility,child: cardslist(2)),
              Visibility(visible: cardFourVisibility,child: cardslist(3)),
            ],
          ),
        ),
      ),
    );
  }
  Widget cardslist(int index){
    if(name.length <= 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'),),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

output: