FLUTTER -> Pass data from SignUpScreen to OnboardingScreen

Question

I would like the user to enter their data in SignUpScreen so I can use them in the OnboardingScreen e.g. I can save the data when he clicks the Done button.

The background to the whole idea was that I didn't want to have one screen where the user had to fill out a large number of fields, so I divided them up into different screens.

I need your help Please help me.

Thanks in advance.

//OnbordingScreen

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

  static const routeName = "/signUpOnbording";

  @override
  State<SignUpOnbordingScreen> createState() => _SignUpOnbordingScreenState();
}

class _SignUpOnbordingScreenState extends State<SignUpOnbordingScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: IntroductionScreen(
        controlsMargin: const EdgeInsets.fromLTRB(0, 99, 0, 0),
        curve: Curves.easeOutCubic,
        animationDuration: 450,
        freeze: true,
        showBackButton: true,
        showNextButton: true,
        showDoneButton: true,
        rawPages: const [
          SignUpEmail(),
          SignUpNumbers(),
          SignUpSocialNetwork(),
        ],
        back: Text(
          "Back",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18,
            color: Theme.of(context).primaryColor,
          ),
        ),
        next: Text(
          "Next",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18,
            color: Theme.of(context).primaryColor,
          ),
        ),
        done: Text(
          "Done",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18,
            color: Theme.of(context).primaryColor,
          ),
        ),
        onDone: () {}
      ),
    );
  }
}

// SignUpEmailScreen

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

  static const routeName = "/signUpEmail";

  @override
  State<SignUpEmail> createState() => _SignUpEmailState();
}

class _SignUpEmailState extends State<SignUpEmail> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _passwordWiederholenController = TextEditingController();

  String? userEmail;
  String? userPassword;
  String? userPasswordWiederholen;

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    _passwordWiederholenController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    userEmail = _emailController.text;
    userPassword = _passwordController.text;
    userPasswordWiederholen = _passwordWiederholenController.text;

    var _saveUser = User(
      id: DateTime.now().toString(),
      email: userEmail!,
      password: userPassword!,
      passwordWiederholen: userPasswordWiederholen!,
    );

    return Scaffold(
      body: SingleChildScrollView(
        reverse: true,
        child: Column(
              children: [
                Form(
                  key: _formKey,
                  child: Column(
                    children: [
                      textfeld(
                        icon: Icons.mail,
                        hintText: "[email protected]",
                        labelText: "Emailadresse",
                        keyboardType: TextInputType.text,
                        obscureText: false,
                        autofocus: false,
                        controller: _emailController,
                        validator: (velue) {
                          if (velue!.isEmpty) {
                            return "Bitte tragen sie eine gültige Emailadresse ein";
                          }
                          if (!velue.contains(
                            RegExp(
                                r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"),
                          )) {
                            return "Keine gültige Emailadresse";
                          }
                          return null;
                        },
                        onSaved: (value) {
                          _saveUser = User(
                              id: _saveUser.id,
                              email: value!.trim(),
                              password: _saveUser.password,
                              passwordWiederholen: _saveUser.passwordWiederholen);
                          return null;
                        },
                        onChanged: (_) {
                          if (_formKey.currentState!.validate()) {
                            _formKey.currentState!.save();
                            print(
                                "${_saveUser.email}"
                        },
                      ),
                      textfeld(
                        icon: Icons.lock,
                        hintText: "Passwort min. 8 Zeichen",
                        labelText: "Passwort",
                        keyboardType: TextInputType.visiblePassword,
                        obscureText: true,
                        autofocus: false,
                        controller: _passwordController,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return "Bitte geben Sie noch ein Passwort ein";
                          }
                          if (value.length <= 7) {
                            return "Ihr Password muss min. 8 Zeichen haben";
                          }
                          return null;
                        },
                        onSaved: (value) {
                          _saveUser = User(
                              id: _saveUser.id,
                              email: _saveUser.email,
                              password: value!,
                              passwordWiederholen: _saveUser.passwordWiederholen);
                          return null;
                        },
                        onChanged: (_) {
                          if (_formKey.currentState!.validate()) {
                            _formKey.currentState!.save();
                            print(
                                "${_saveUser.email}"
                      ),
                      textfeld(
                        icon: Icons.lock,
                        hintText: "Passwort min. 8 Zeichen",
                        labelText: "Passwort wiederholen",
                        keyboardType: TextInputType.visiblePassword,
                        obscureText: true,
                        autofocus: false,
                        controller: _passwordWiederholenController,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return "Bitte Password wiederholen";
                          }
                          if (value.length <= 7) {
                            return "Ihr Password muss min. 8 Zeichen haben";
                          }
                          if (value != _passwordController.text) {
                            return "Sie haben sich beim Password vertippt";
                          }
                          return null;
                        },
                        onSaved: (value) {
                          _saveUser = User(
                              id: _saveUser.id,
                              email: _saveUser.email,
                              password: _saveUser.password,
                              passwordWiederholen: value!);
                          return null;
                        },
                        onChanged: (_) {
                          if (_formKey.currentState!.validate()) {
                            _formKey.currentState!.save();
                            print(
                                "${_saveUser.email}"
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
        padding: const EdgeInsets.only(bottom: 81),
      ),
    );
  }
}

Answer 1

A simple option is to provide a callback that SignUpEmail can call when a user is saved.

@override
Widget build(BuildContext context) {
  return SomeWidget(
    SignUpEmail(callback),
  );
}

void callback(User user) {
  // TODO
}

Instead of passing data between widgets, a shared state would be a cleaner solution. Take a look at List of state management approaches to get started.