How to change the item color and do some action when the item of the listview is visible in the viewport in flutter?

Question

I have generated a list of items by using for loop and then add those items in listview in the tabbarview.
In the listView, there are items (containers) and when that particular item is seen fully in the screen,
I want these things:

1. screen should also show the description of the particular item from a list.
2. the rest of the items(container) that are not fully seen in the screen should have different colors and size but they are partially seen on the screen.
3. when scrolling to the another in the listview, and when that particular item is seen more than 60%, that particular item should automatically be seen in the screen 100% and making the rest of the item having different sizes and colors.

Code I am making the items(container) and adding those container like this.

  //this is tabviewer maker
  tabViewerMaker(BuildContext context) {
    List<ListView> tabBarView = List();
    for (var i = 0; i < tabsText.length; i++) {
      tabBarView.add(
        ListView(
            scrollDirection: Axis.horizontal,
            children: containerAdder(i, context)),
      );
    }
    return tabBarView;
  }

//this is for adding container to the listview
  containerAdder(initialI, BuildContext context) {
    List<Widget> listViewContainer = List();

    for (var j = 0; j < mainListAllPlantDetailsList1.length; j++) {
      if (tabsText[initialI] == mainListAllPlantDetailsList1[j].ca) {
        listViewContainer.add(Container(
            child: Column(
          children: [
            GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => ParticularPlant2(
                            indexNumber: j,
                          )),
                );
              },
              child: Container(
                  height: 350,
                  width: 250,
                  child: Stack(
                    children: [
                      Positioned(
                        bottom: 10,
                        child: Container(
                          padding: EdgeInsets.fromLTRB(25, 50, 20, 20),
                          height: 160,
                          width: 220,
                          decoration: BoxDecoration(
                            color: Colors.lightGreen,
                            borderRadius: BorderRadiusDirectional.only(
                              bottomEnd: Radius.circular(80),
                              topEnd: Radius.circular(80),
                              topStart: Radius.circular(80),
                            ),
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                mainListAllPlantDetailsList1[j].ca,
                                style: TextStyle(
                                    color: Color(0xFFC8E392), fontSize: 15),
                              ),
                              Text(
                                mainListAllPlantDetailsList1[j].pN,
                                style: TextStyle(
                                    color: Color(0xFFEAF4D5), fontSize: 25),
                              ),
                              Text(
                                  "\$" +
                                      mainListAllPlantDetailsList1[j]
                                          .pr
                                          .toString(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 30,
                                      fontWeight: FontWeight.w600)),
                            ],
                          ),
                        ),
                      ),
                      Positioned(
                        top: 20,
                        left: 25,
                        child: Container(
                            height: 210,
                            child: Image(
                                image: AssetImage(
                                    mainListAllPlantDetailsList1[j].pI))),
                      )
                    ],
                  )),
            ),            
          ],
        )));
      } else {
        continue;
      }
    }
    return listViewContainer;
  }

I am completely new to flutter. Please help me with this.

Answer 1

I needed this as well and ended up using this solution: https://github.com/flutter/flutter/issues/19941#issuecomment-538742609