Flutter on page display, need to call a API method and show progress

Question

I want to call a API method when the page initialized.

Need to display progress when the future function is waiting, i tried with Future builder but problem is everytime when there is change the future builder function called again.

class VerificationMethodScreen extends StatefulWidget {
  const VerificationMethodScreen({Key? key}) : super(key: key);

  @override
  State<VerificationMethodScreen> createState() =>
      _VerificationMethodScreenState();
}

class _VerificationMethodScreenState extends State<VerificationMethodScreen> {
  VerificationMethodViewModel? _viewModel;

  @override
  Widget build(BuildContext context) {
    _viewModel = context.watch<VerificationMethodViewModel>();
    return init(context);
  }

  Widget init(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: CommonAppBar(
            context: context,
          ),
          body: _viewModel!.loading
              ? const CircularProgressIndicator()
              : Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // Title
                    Center(
                      child: LocaleText(
                        'select_verification_method',
                        textAlign: TextAlign.center,
                        style: ThemeHelper().titleText(fontSize: 22.0),
                      ),
                    ),
                    //#region Button Groups
                    GestureDetector(
                        onTap: () => {
                              _viewModel!.performVerification(
                                  method: VerificationMethods.mobileId)
                            },
                        child: CommonVerificationButton(
                            context: context,
                            title: 'Mobile ID',
                            icon: Icons.phone_android_outlined)),
                    GestureDetector(
                      onTap: () => {
                        _viewModel!.performVerification(
                            method: VerificationMethods.mrz)
                      },
                      child: CommonVerificationButton(
                          context: context,
                          title: 'MRZ',
                          icon: Icons.document_scanner_outlined),
                    ),
                    GestureDetector(
                      onTap: () => {
                        _viewModel!.performVerification(
                            method: VerificationMethods.ocr)
                      },
                      child: CommonVerificationButton(
                          context: context,
                          title: 'OCR',
                          icon: Icons.qr_code_scanner_outlined),
                    ),
                    //#endregion
                  ],
                ),
        ),
        CommonProgressIndicator(
          context: context,
          showDialog: _viewModel!.loading,
        )
      ],
    );
  }

class VerificationMethodViewModel extends BaseViewModel {
  
  Future<void> onInit() async{
    await getVerificationMethods();
  }

  Future<bool> performVerification(
      {required VerificationMethods method}) async {
    bool canPerform = false;
    setLoading(true);
    try {
      // here need to check verification method available
      await Future.delayed(const Duration(seconds: 1));
      canPerform = true;
    } catch (e) {
      errorMessage = "Internal error occurred!";
    } finally {
      setLoading(false);
    }
    return canPerform;
  }

  Future<List<VerificationMethodsModel>> getVerificationMethods() async {
    setLoading(true);
    final items = <VerificationMethodsModel>[
      VerificationMethodsModel(1, null, "Mobile ID", "Mobile ID", null,
          "mobile_id", 1, List.empty()),
      VerificationMethodsModel(
          2, null, "MRZ", "MRZ", null, "mrz", 2, List.empty()),
      VerificationMethodsModel(
        3,
        null,
        "OCR",
        "OCR",
        null,
        "OCR",
        3,
        <VerificationMethodsModel>[
          VerificationMethodsModel(4, 3, "Civil ID", "البطاقة المدنية",
              "Civil ID", "Kuwait_ID", 1, List.empty()),
          VerificationMethodsModel(5, 3, "Non Kuwaity ID", "Non Kuwaity ID",
              "Civil ID", "NonKuwait_ID", 2, List.empty()),
          VerificationMethodsModel(
              6, 3, "KSA ID", "KSA ID", "Civil ID", "SAU_ID", 3, List.empty()),
        ],
      ),
    ];
    try {

      await Future.delayed(const Duration(seconds: 2));
    } catch (e) {
      errorMessage = "Internal error occurred!";
    } finally {
      setLoading(false);
    }
    return items;
  }
}
class BaseViewModel with ChangeNotifier {
  //#region VARIABLES
  bool isDebugMode = false;
  bool _loading = false;
  int appLanguage = 0;
  String errorMessage = "";
  bool isLoggedIn = false;
  UserLoginDetailModel? loggedInUser;
  EmployeeLoginResponseModel? loggedInEmployee;

  bool get loading => _loading;

  setLoading(bool loading) async {
    _loading = loading;
    notifyListeners();
  }

  bool _initLoaded = false;

  bool get initLoaded => _initLoaded;

  setInitLoaded(bool loading) async {
    _initLoaded = loading;
    notifyListeners();
  }
  //#endregion

  BaseViewModel() {
    if (Locales.lang.toLowerCase() == "ar") {
      appLanguage = 1;
    } else {
      appLanguage = 0;
    }
  }
}

I need to call function inside viewmodel

getVerificationMethods

wait for 2 seconds , show progress and hide.

This future function need to call only when page displayed, no need every time when build.

Please help!