scrollCotroller.animateTo not working in Flutter

Question

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:sizer/sizer.dart';

class ProjectFloorPlan extends StatefulWidget {
  ProjectFloorPlan(
      {Key? key,
      required this.selectedFloorPlan,
      required this.onChangeFloorplan})
      : super(key: key);
  final FloorPlan1? selectedFloorPlan;
  final Function onChangeFloorplan;
  @override
  State<ProjectFloorPlan> createState() => _ProjectFloorPlanState();
}

class _ProjectFloorPlanState extends State<ProjectFloorPlan> {
  final itemKey = GlobalKey();
  final scrollController = ScrollController();

  @override
  void initState() {
    // selectedFloorPlan = widget.projectDetails?.property?.floorPlan?.floorPlan1;

    super.initState();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      key: const PageStorageKey<String>('controllerA'),
      scrollDirection: Axis.horizontal,
      controller: scrollController,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GoldenRoundedBox(
            onTap: () {
              Scrollable.ensureVisible(itemKey.currentContext!);

              scrollController.animateTo(
                0,
                duration: const Duration(milliseconds: 700),
                curve: Curves.easeIn,
              );
            },
            text: 'Floor plan 1BHK',
          ),
          GoldenRoundedBox(
            onTap: () {
              Scrollable.ensureVisible(itemKey.currentContext!);

              scrollController.animateTo(
                0,
                duration: const Duration(milliseconds: 700),
                curve: Curves.easeIn,
              );
            },
            text: 'Floor plan 2BHK',
          ),
          GoldenRoundedBox(
            onTap: () {
              Scrollable.ensureVisible(itemKey.currentContext!);

              scrollController.animateTo(
                0,
                duration: const Duration(milliseconds: 700),
                curve: Curves.easeIn,
              );
            },
            text: 'Floor plan 3BHK',
          ),
        ],
      ),
    );
  }
}

I have 3 buttons which are horizontally scrollable. On pressing the button which is slightly visible in the UI it should scroll horizontally to make the button visible completely.

The buttons look like this. On pressing the third button which is slightly visible it must scroll to make it visible completely. I have used

Scrollable.ensureVisible(itemKey.currentContext!);

and

scrollController.animateTo(
                            300,
                            duration: const Duration(milliseconds: 700),
                            curve: Curves.easeIn,
                          );

But both of these are not working. How to achieve this?

Answer 1

Firstly include itemKey that are you using on `

 body: SingleChildScrollView(
        key: itemKey,

.animateTo first positional argument takes an offset that will be used to scroll, you can increase the value like 100

scrollController.animateTo(
  100,
  duration: const Duration(milliseconds: 700),
  curve: Curves.easeIn,
);

Instead of hard-coded value you can use scroll_to_index or get the text width and provide there