How to send data to backend (heroku) for a multi-page signup page using Dio package?

Question

I am trying to write a signup page using Flutter's Dio package. It is multi-page which consists of: selecting your email, school, interest categories, and date of birth. User will be proceeded to the next page after completing the previous page. I want all the data to be posted to /user/register API of USER API once the user completes the last page, which is the dob page. How should I implement such signup page? Is there any example? I would like your help. Thank you.

Answer 1

If you can share more details or screenshots about what you want, you can reach much healthier and more accurate answers. I'll still try to be as helpful as possible.

You can trigger the code below when clicking the 'Save' button on the register page

  Future<bool> userSave(String email, String school, String interestCategories,
  DateTime dateOfBirth) async {
try {
  const String apiUrl = "your-api-url";
  var params = {
    "email": email,
    "school": school,
    "interestCategories": interestCategories,
    "dateOfBirth": dateOfBirth
  };
  Response response = await Dio().post(
    apiUrl,
    options: Options(headers: {
      HttpHeaders.contentTypeHeader: "application/json",
    }),
    data: jsonEncode(params),
  );
  if (response.statusCode == 200) {
    return true;
  } else {
    return false;
  }
} catch (e) {
  return false;
}
}

I prepared an example to be compatible with your screen, you can get the places you need from here

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController interestCategoriesController = TextEditingController();
  TextEditingController emailController = TextEditingController();
  TextEditingController schoolController = TextEditingController();
  DateTime dateOfBirth = DateTime.now();
  bool apiResponse = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: mainArea(),
    );
  }

  Widget mainArea() {
    return Center(
      child: ElevatedButton(
        child: const Text("Save"),
        onPressed: () async {
          apiResponse = await userSave(
              emailController.text,
              schoolController.text,
              interestCategoriesController.text,
              dateOfBirth);
          if (apiResponse == true) {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondPage()),
            );
          } else {
            //You can show alerDialog for response is false
          }
        },
      ),
    );
  }

  Future<bool> userSave(String email, String school, String interestCategories,
      DateTime dateOfBirth) async {
    try {
      const String apiUrl = "your-api-url";
      var params = {
        "email": email,
        "school": school,
        "interestCategories": interestCategories,
        "dateOfBirth": dateOfBirth
      };
      Response response = await Dio().post(
        apiUrl,
        options: Options(headers: {
          HttpHeaders.contentTypeHeader: "application/json",
        }),
        data: jsonEncode(params),
      );
      if (response.statusCode == 200) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      return false;
    }
  }
}