flutter different scrollControllers have same offset value issue

Question

Under one page, I have created two scroll controllers for two ListView.builder widgets. However, I don't know why when I scroll the first ListView, and click title "scroll example" to change to the second ListView page and the second ListView also changes its scroll position and the _scrollController2 got the same value with _scrollController1. Is there any good way to make the two controllers independent?

import 'package:flutter/material.dart';

void main() {
  runApp(OnlineImageExample());
}

class OnlineImageExample extends StatefulWidget {
  @override
  _OnlineImageExampleState createState() => _OnlineImageExampleState();
}

class _OnlineImageExampleState extends State<OnlineImageExample> {
  ScrollController _scrollController1 = ScrollController();
  ScrollController _scrollController2 = ScrollController();
  bool flag = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: InkWell(
            onTap: () {
              setState(() {
                flag = !flag;
              });
            },
            child: Text('scroll example'),
          ),
        ),
        body: Column(
          children: [
            flag
                ? Expanded(
              child: ListView.builder(
                physics: AlwaysScrollableScrollPhysics(),
                controller: _scrollController1,
                itemCount: 30,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: EdgeInsets.all(10),
                    child: Container(
                      height: 60,
                      width: 20,
                      color: Colors.red,
                      child: Text("$index"),
                    ),
                  );
                },
              ),
            )
                : Expanded(
              child: ListView.builder(
                physics: AlwaysScrollableScrollPhysics(),
                controller: _scrollController2,
                itemCount: 30,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: EdgeInsets.all(10),
                    child: Container(
                      height: 60,
                      width: 20,
                      color: Colors.blue,
                      child: Text("$index"),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

The widget structure is quite same, You can use key that will tell help the widget tree to differentiate the widget.

   flag
     ? Expanded(
       key: const ValueKey("list 1"),
       ....)
     : Expanded(
       key: const ValueKey("list 2"),

more about Keys