progress through screens by setting the state on parent widget function

I have a parent widget called AuthenticationState and the below four child widgets.

1. PhoneNumber
2. OneTimeCode
3. DisplayName
4. ProfilePicture

I want to control the movement from the PhoneNumber widget till the ProfilePicture widget from the parent widget AuthenticationState.

Below is my parent widget with the switchscreen function which when clicked should navigate to the OneTimeCode widget.

class _AuthenticationStateState extends State<AuthenticationState> {
  Widget? setActiveAuthenticationScreen;

  @override
  void initState() {
    super.initState();
    setActiveAuthenticationScreen = PhoneNumber(switchScreen);
  }

  switchScreen() {
    setState(() {
      setActiveAuthenticationScreen = OneTimeCode(switchScreen);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: setActiveAuthenticationScreen,
      ),
    );
  }
}

And here is the code for the PhoneNumber widget -

class PhoneNumber extends StatelessWidget {
  PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on PhoneNumber'),
        )
      ],
    );
  }
}

And here is the code for the OneTimeCode widget -

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);

  final void Function() nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: nextScreen,
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on OneTimeCode'),
        )
      ],
    );
  }
}

UPDATED ANSWER:

import 'package:flutter/material.dart';

class AuthenticationState extends StatefulWidget {
  const AuthenticationState({super.key});

  @override
  State<AuthenticationState> createState() => _AuthenticationStateState();
}

class _AuthenticationStateState extends State<AuthenticationState> {
  int currentScreen = 1;

  switchScreen(int newScreen) {
    setState(() {
      currentScreen = newScreen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Builder(builder: (context) {
          //here we want to select what screen to show depending on the current screen;
          switch (currentScreen) {
            case 1:
              return PhoneNumber(switchScreen);
            case 2:
              return OneTimeCode(switchScreen);
            case 3:
              return DisplayName(switchScreen);
            case 4:
              return ProfilePicture(switchScreen);
            default:
              return const Center(child: Text('done!'));
          }
        }),
      ),
    );
  }
}

class PhoneNumber extends StatelessWidget {
  const PhoneNumber(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(2),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on PhoneNumber'),
        )
      ],
    );
  }
}

class OneTimeCode extends StatelessWidget {
  const OneTimeCode(this.nextScreen, {Key? key}) : super(key: key);
  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(3),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on OneTimeCode'),
        )
      ],
    );
  }
}

class DisplayName extends StatelessWidget {
  const DisplayName(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(4),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on DisplayName'),
        )
      ],
    );
  }
}

class ProfilePicture extends StatelessWidget {
  const ProfilePicture(this.nextScreen, {Key? key}) : super(key: key);

  final Function nextScreen;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        OutlinedButton.icon(
          icon: const Icon(Icons.arrow_right_alt),
          onPressed: () => nextScreen(0),
          style: OutlinedButton.styleFrom(foregroundColor: Colors.black),
          label: const Text('Next on ProfilePicture'),
        )
      ],
    );
  }
}

OLD ANSWER:

There is a pub package available called flutter_sliding_tutorial that achieves what you're trying to do. You can also have a look at the built-in Stepper class.