I am trying to make a notepad app with a small page view on the side so I trying to add two vertical ListView.separated inside one Row to make a notepad app looks like that :

but When I am trying to scroll in the main view or the small view I got the following error :

The provided ScrollController is currently attached to more than one ScrollPosition.

I want to make Both listViews scrollable and link two listViews by index.

This is my main code :

  const Mainview({Key? key}) : super(key: key);

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

class _MainviewState extends State<Mainview> {
  @override
  Widget build(BuildContext context) {
    // ignore: avoid_unnecessary_containers
    return Container(
      color: Colors.white.withOpacity(0.7),
      child: Row(
        children: [
          //! small pages
          Expanded(
            child: ListView.separated(
              itemBuilder: (context, index) {
                return const Padding(
                  padding: EdgeInsets.all(15),
                  child: SizedBox(
                    height: 150,
                    child: CustomPage(),
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return const SizedBox(
                  height: 3,
                );
              },
              itemCount: 5,
            ),
            flex: 1,
          ),
          //! main pages
          Expanded(
            child: ListView.separated(
              itemBuilder: (context, index) {
                return const Padding(
                  padding: EdgeInsets.all(15),
                  child: SizedBox(
                    height: 850,
                    child: CustomPage(),
                  ),
                );
              },
              separatorBuilder: (context, index) {
                return const SizedBox(
                  height: 3,
                );
              },
              itemCount: 5,
            ),
            flex: 9,
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

Add ScrollController for each list view

          ...     
          Expanded(
            child: ListView.separated(
              controller: const ScrollController(),  // <-------------
              itemBuilder: (context, index) {
                return const Padding(
                  padding: EdgeInsets.all(15),
                  child: SizedBox(
                    height: 850,
                    child: CustomPage(),
                  ),
                );
              },
          ...