How to check position while scrolling listview in flutter?

Question

I want to record the position of the element in listview in flutter and on the basis of that I want to change some information to be displayed, below is the code for using listview

ListView.separated(
  scrollDirection: Axis.horizontal,
  separatorBuilder: (context, index) =>
      SizedBox(width: MediaQuery.of(context).size.width / 150),
      itemCount: myList.length + 1,
      itemBuilder: (context, index) => index == 0
          ? SizedBox(width: MediaQuery.of(context).size.width / 2.2)
          : ClipRRect(
              child: Padding(
                  padding: EdgeInsets.fromLTRB(2, 14, 18, 14),
                  child: Container(
                      width: MediaQuery.of(context).size.width / 2.55,
                      height: 150,
                      child: Center(
                          child: GestureDetector(
                              onTap: (){
                                  index2 = myList[index-1];
                              },
                              child: Text(
                              myList[index - 1].toString(),
                                 style: TextStyle(
                                     color: Colors.black,
                                     fontSize: 24,
                                     fontWeight: FontWeight.bold),
                                  ),
                           )
                        ),
                        decoration: BoxDecoration(
                           borderRadius:
                                BorderRadius.all(Radius.circular(10)),
                           boxShadow: [
                                BoxShadow(
                                  color: Colors.grey,
                                  offset: Offset(2.0, 2.0), //(x,y)
                                  blurRadius: 4.0,
                                ),
                              ],
                            gradient: LinearGradient(
                                colors: [Colors.blue[200], Colors.white],
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight
                            )
                        ),
                ),
          )
    )
),

how should I record the position of the element and then display the another set information according to that?

Answer 1

to get offSets of your list you'll need to add a listeners on a scrollController so you can get the offSets each time it changes. here is a sample code:

  @override
  _RadioTestState createState() => _RadioTestState();
}

class _RadioTestState extends State<RadioTest> {
  ScrollController _scrollController;
  List<String> list;
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        print("offset = ${_scrollController.offset}");
      });
    list = List<String>();
    for (var i = 0; i < 50; i++) {
      list.add("test");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: _scrollController,
      children: [
        ...list.map(
          (item) => ListTile(
            title: Text("test"),
          ),
        ),
      ],
    );
  }
}

good luck.