Search code examples
fluttersharedpreferencestoken

How can i save data in shared Preferences and receive it to another page in flutter


I tried to save data in shared Preferences. when I hit in api, with id and pass it gives me token and id. I saved my token in sharedPreferences but can't save userId.

but I want to send my token and userId to another page called 'lists.dart', and want to make conditions using userId like snackbar or toast etc. so userId and token must need to save in shared preferences and will use in another page for getting data. how to do it?

This is api response.

{token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjI4OTksImlzcyI6Imh0dHBzOi8vcG9ydGFsLWFwaS5qb21ha2hhdGEuY29tL2FwaS9hdXRoL2xvZ2luIiwiaWF0IjoxNjI5Nzc4NTI3LCJleHAiOjE2Mjk4NjQ5MjcsIm5iZiI6MTYyOTc3ODUyNywianRpIjoiM25Xbkl3UVFGNE1YSWZVVCJ9.Q9dxnu-WWHA2p8n0oSEamLXDOPqdzsemnrlHHfiuV7o, message: success, userId: 2899, passwordChanged: yes}

This is Api request

Future<Album> createAlbum(String employee_custom_id, String password) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    final response = await http.post(
      Uri.parse('https://....com/api/auth/login'),
      headers: <String, String>{
        'Content-Type': 'application/json',
      },
      body: jsonEncode(<String, String>{
        'employee_custom_id': 1002899,
        'password': 000000,
      }),
    );

    final data = json.decode(response.body);
    if (response.statusCode == 200) {
      sharedPreferences.setString("token", data['token']);
      sharedPreferences.setInt("userId", data['userId']);

      log('$data');
      // print(id);

      return Album.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create album.');
    }
}

Here is Full Code

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  bool _validate = false;
  int charLength = 0;
  bool _status = false;

  _onChanged(String value) {
    setState(() {
      charLength = value.length;
    });

    if (charLength >= 4) {
      setState(() {
        _status = true;
      });
    } else {
      setState(() {
        _status = false;
      });
    }
  }

  Future<Album>? _futureAlbum;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery
        .of(context)
        .size;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Portal',
      home: Scaffold(
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: buildColumn(),
        ),
      ),
    );
  }

  Column buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[

        TextField(
          controller: _emailController,
          keyboardType: TextInputType.text,
          autofocus: true,
          onChanged: _onChanged,
          decoration: InputDecoration(
            hintText: 'Email or ID',
            hintStyle: TextStyle(color: Colors.grey),
            filled: true,
            fillColor: Colors.white70,
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
              borderSide: BorderSide(color: Colors.purpleAccent, width: 2),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              borderSide: BorderSide(color: Colors.purpleAccent),
            ),

            prefixIcon: Icon(Icons.email),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        TextField(
          controller: _passwordController,
          keyboardType: TextInputType.visiblePassword,
          autofocus: false,
          obscureText: false,
          decoration: InputDecoration(
            hintText: 'Password',
            hintStyle: TextStyle(color: Colors.grey),
            filled: true,
            fillColor: Colors.white70,
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
              borderSide: BorderSide(color: Colors.purpleAccent, width: 2),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              borderSide: BorderSide(color: Colors.purpleAccent),
            ),
            prefixIcon: Icon(Icons.lock),
            suffixIcon: Icon(Icons.visibility_off),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Visibility(
          maintainSize: true,
          maintainAnimation: true,
          maintainState: true,
          visible: _status,
          child: Container(
              margin: EdgeInsets.only(top: 20),
              child: Center(
                child: RaisedButton(
                  child: Text('Login'),
                  onPressed: () {
                    setState(() {
                      // in this position i want to make snackbar by using if-else condition with checking userId
                 
                      _futureAlbum =
                          createAlbum(_emailController.text, _passwordController.text);
                    });
                  },
                  color: Colors.green,
                  textColor: Colors.white,
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                ),
              )
          ),
        )
      ],
    );
  }

  Future<Album> createAlbum(String employee_custom_id, String password) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    final response = await http.post(
      Uri.parse('https:.com/api/auth/login'),
      headers: <String, String>{
        'Content-Type': 'application/json',
      },
      body: jsonEncode(<String, String>{
        'employee_custom_id': employee_custom_id,  //1002899
        'password': password,  000000
      }),
    );


    final data = json.decode(response.body);
    if (response.statusCode == 200) {
      sharedPreferences.setString("token", data['token']);
      sharedPreferences.setInt("userId", data['userId']);


      log('$data');
      // print(id);

      return Album.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create album.');
    }
  }
}

class Album {
  final int id;
  final String employee_custom_id;
  final String password;

  Album({required this.id,
    required this.employee_custom_id,
    required this.password});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      employee_custom_id: json['title'],
      password: json['password'],
    );
  }
}

now I want to receive 'token' and 'userId' in my lists.dart page.

Future<List<ListAlbum>> listData() async {

  final token = // token that i want to receiv from login page here.
  String url =
      'https://.com/api/getOrganizationData?token=${token}';

  Dio dio = new Dio();
  dio.options.headers['Content-Type'] = 'application/json';
  final body = {'limit': 100, 'orderBy': 'idEmployee', 'orderType': 'DESC'};
  final response = await dio.post(url, data: body);

  if (response.statusCode == 200) {
    print(response.statusCode);
    print(response.data);
    // sharedPreferences.setString("token", response.data['token']);

    return response.data["data"]["data"]
        .map<ListAlbum>((json) => ListAlbum.fromJson(json))
        .toList();

  } else {
    throw Exception('Failed!');
  }
}

Solution

  • Create a Class for sharedprefrence

    class SharedPrefrence {
      Future<bool> setToken(String token) async {
        final SharedPreferences prefs = await SharedPreferences.getInstance();
        return prefs.setString("token", token);
      }
    
      Future<String> getToken() async {
        final SharedPreferences prefs = await SharedPreferences.getInstance();
        return prefs.getString("token") ?? '';
      }
    }
    

    To save token data from api

    extract api response and pass to setToken function
    
     Map<String, dynamic> value = json.decode(response.body);
    
     SharedPrefrence().setToken(value['token']);
    

    To access token from another page or function use like following either you can create variable as global and call the getToken function in initState and use token varibale to api or use Future code in your api code

    String token;
    @override
      void initState() {
        super.initState();
    
        Future auth_token = SharedPrefrence().getToken();
        auth_token.then((data) async {
          token = data;
          
        });
      }
    

    To use in api code

    Future<List<ListAlbum>> listData() async {
    final token;
       Future auth_token = SharedPrefrence().getToken();
        auth_token.then((data) async {
          token = data;
          String url =
          'https://portal-api.jomakhata.com/api/getOrganizationData?token=${token}';
    
      Dio dio = new Dio();
      dio.options.headers['Content-Type'] = 'application/json';
      final body = {'limit': 100, 'orderBy': 'idEmployee', 'orderType': 'DESC'};
      final response = await dio.post(url, data: body);
    
      if (response.statusCode == 200) {
        print(response.statusCode);
        print(response.data);
        // sharedPreferences.setString("token", response.data['token']);
    
        return response.data["data"]["data"]
            .map<ListAlbum>((json) => ListAlbum.fromJson(json))
            .toList();
    
      } else {
        throw Exception('Failed!');
      }
        });
      
    }