How to refactor the below class to StatefulWidget and using mounted properly in addition to a context after an Async gap

Question

class AuthService {
  //sign up user
  void signUpUser({
    required BuildContext context,
    required String email,
    required String password,
    required String name,
   }) async {
    try {
      User user = User(
        id: '',
        name: name,
        password: password,
        email: email,
        address: '',
        type: '',
        token: '',
       // cart: [],
      );
      http.Response res = await http.post(
        Uri.parse('$uri/api/signup'),
        body: user.toJson(),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );

      httpErrorHandle(
        response: res,
        context: context,
        onSuccess: () {
          showSnackBar(
            context,
            'Account created! Login with the same credentials!',
          );
        },
      );
    } catch (e) {
      showSnackBar(context, e.toString());
    }
  }

  // sign in user
  void signInUser({
    required BuildContext context,
    required String email,
    required String password,
  }) async {
    try {
      http.Response res = await http.post(
        Uri.parse('$uri/api/signin'),
        body: jsonEncode({
          'email': email,
          'password': password,
        }),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      //print(res.body);
     
      httpErrorHandle(
        response: res,
        context: context,
       onSuccess: () async {

          SharedPreferences prefs = await SharedPreferences.getInstance();
          //Do not use BuildContexts across async gaps.dartuse_build_context_synchronously
          Provider.of<UserProvider>(context, listen: false).setUser(res.body);
          await prefs.setString('x-auth-token', jsonDecode(res.body)['token']); 
         
 //Do not use BuildContexts across async gaps.dartuse_build_context_synchronously
            Navigator.pushNamedAndRemoveUntil(
            context,
            HomeScreen.routeName,
            (route) => false,
          );
     

        },
      );

    } catch (e) {
      showSnackBar(context, e.toString());
    }
  }
  

   // get user data
  void getUserData (
    BuildContext context,
  ) async {
    try {
       SharedPreferences prefs = await SharedPreferences.getInstance();
       String? token = prefs.getString('x-auth-token');

       if(token == null ){
        prefs.setString('x-auth-token', '');
       }

     var tokenRes = await http.post
     (Uri.parse('$uri/tokenIsValid'),
     headers: <String, String>{
       'Content-Type': 'application/json; charset=UTF-8',
       'x-auth-token': token!
     },
     );

     var response = jsonDecode(tokenRes.body);

     if(response == true){
    http.Response userRes =  await http.get
       (Uri.parse('$uri/'),headers: <String, String>{
       'Content-Type': 'application/json; charset=UTF-8',
       'x-auth-token': token
     }, );
 //Do not use BuildContexts across async gaps.dartuse_build_context_synchronously
     var userProvider = Provider.of<UserProvider>(context, listen: false);
     userProvider.setUser(userRes.body);
     }
    } catch (e) {
      showSnackBar(context, e.toString());
    }
  }
}

I need to refactor the above class, which is causing a BuildContexts across async gaps warning issue to statefulwidget class with mounted properly when having a buildContexts issue mentioned in the code.

score 0 · Answer 1 · answered Nov 28 '22 at 11:00

You have to pass the parts that use BuildContext as parameters to the asynchronous function. So, you can feactor the signInUser function as follows:

void signInUser({
    required BuildContext context,
    required String email,
    required String password,
    required UserProvider userProvider,
    required VoidCallback onSuccess,
  }) async {
    try {
      http.Response res = await http.post(
        Uri.parse('$uri/api/signin'),
        body: jsonEncode({
          'email': email,
          'password': password,
        }),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      //print(res.body);

      httpErrorHandle(
        response: res,
        context: context,
        onSuccess: () async {
          SharedPreferences prefs = await SharedPreferences.getInstance();

          //Do not use BuildContexts across async gaps.dartuse_build_context_synchronously
          provider.setUser(res.body);

          await prefs.setString('x-auth-token', jsonDecode(res.body)['token']);

          //Do not use BuildContexts across async gaps.dartuse_build_context_synchronously
          onSuccess.call();
        },
      );
    } catch (e) {
      showSnackBar(context, e.toString());
    }
  }

And in other places you can call signInUser as follows:

signInUser(
  contex: context,
  email: email,
  password: ppassword,
  userProvider:
      Provider.of<UserProvider>(context, listen: false),
  onSuccess: () {
    Navigator.pushNamedAndRemoveUntil(
      context,
      HomeScreen.routeName,
      (route) => false,
    );
  });

How to refactor the below class to StatefulWidget and using mounted properly in addition to a context after an Async gap

1 Answers1