我在一列中有一个SingleChildScrollView。有两个墨水池排成一行。下面的行，我有2个容器具有不同的高度和内容。我希望屏幕滚动到第一个容器，当用户点击第一个墨水池和屏幕应该滚动到第二个容器，当用户点击第二个墨水池。代码在这里：

class ExperienceCustomDrawer extends StatelessWidget {
  ExperienceCustomDrawer({
    super.key,
  });

  @override
  Widget build(BuildContext context) {

    return Drawer(
        shape:const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20)),
        ),
        width: MediaQuery.of(context).size.width * 0.6,
        child:Container(
          color: Constants.black,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 15, 30, 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      InkWell(
                          onTap:(){
                            Navigator.of(context).pop();
                          },
                          child: const Icon(Icons.close, color: Constants.orange,))
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(30, 15, 30, 15),
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Text("Sea Food Experience",
                      style: TextStyle(
                        color: Constants.white,
                        fontSize: 28,
                      ),
                    ),
                  ),
                ),

                //THIS IS MY INKWELL ROW
                Container(
                  width: MediaQuery.of(context).size.width *0.6,
                  height: 70,
                  color: Constants.grey,
                  child:
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 30),
                        child: Column(
                          children: [
                            Flexible(
                                child: Text("Details",
                                  style: TextStyle(
                                    color: Constants.orange,
                                    fontSize: 16,
                                  ),
                                )),
                            Flexible(
                              child: Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: CircleAvatar(
                                  radius: 3,
                                  backgroundColor: Constants.orange,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),

                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 15.0),
                        child: Column(
                          children: [
                            Flexible(
                                child: Text("Menus",
                                  style: TextStyle(
                                    color: Constants.orange,
                                    fontSize: 16,
                                  ),
                                )),
                            Flexible(
                              child: Padding(
                                padding: const EdgeInsets.only(top: 8.0),
                                child: CircleAvatar(
                                  radius: 3,
                                  backgroundColor: Constants.orange,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),

                    ],
                  ),
                ),

//THIS IS THE FIRST CONTAINER
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      
                    ],
                  ),
                ),
                
                
                //THIS IS THE second CONTAINER
                Container(child: MenuCard()),


              ],
            ),
          ),
        )
    );
  }
}

我也希望当用户滚动屏幕和屏幕到达第二个容器的第二个墨水池应该改变其颜色为红色显示屏幕上的第二个容器。如果用户在第一容器上，则第一墨水池颜色应该是红色，第二墨水池颜色应该是橙子。