0

this my screen where i fetch data from API using FutureBuilder . I would like to save data getting from server on device and reuse it when i need . I wouldn't like each time fetch data from the server when i open the screen .

My screen :

enter image description here

and this my code :

Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
        /* minimum: const EdgeInsets.only(
            top: 20.0, right: 5.0, left: 5.0, bottom: 10.0),*/
        child: Center(
      child: Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Color(0xFFF6F7F8),
          body: SingleChildScrollView(
              child: Form(
                  key: _formKey,
                  child: FutureBuilder(
                      future: future,
                      //   boxApi.getUser(),
                      builder: (context, snapshot) {
                        // ignore: missing_return
                        print(snapshot.data);
                        switch (snapshot.connectionState) {
                          case ConnectionState.none:
                            return Text('no connection');
                          case ConnectionState.active:
                          case ConnectionState.waiting:
                            return Center(
                              child: CircularProgressIndicator(),
                            );
                            break;
                          case ConnectionState.done:
                            if (snapshot.hasError) {
                              return Text('error');
                            } else if (snapshot.hasData) {
                              // String price = snapshot.data['body'].;
                              //  print("${snapshot.data}");
                              return Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  Container(
                                    padding: EdgeInsets.only(top: 16),
                                    width: MediaQuery.of(context).size.width,
                                    height:
                                        MediaQuery.of(context).size.height / 4,
                                    decoration: BoxDecoration(
                                        boxShadow: [
                                          BoxShadow(
                                              color: Colors.white60,
                                              blurRadius: 15.0,
                                              offset: Offset(0.0, 0.75))
                                        ],
                                        gradient: LinearGradient(
                                          begin: Alignment(0.5, 0.85),
                                          end: Alignment(0.48, -1.08),
                                          colors: [
                                            const Color(0xFF0B0C3A),
                                            const Color(0xFF010611),
                                          ],
                                          stops: [
                                            0.0,
                                            0.5,
                                          ],
                                        ),
                                        //color: blue,
                                        borderRadius: BorderRadius.only(
                                            bottomRight: Radius.circular(32),
                                            bottomLeft: Radius.circular(32))),
                                    child: Column(
                                      children: [
                                        Row(
                                          children: [
                                            SizedBox(
                                              width: 30,
                                            ),
                                            Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Text(
                                                    "${snapshot.data.name}",
                                                    style: TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 25,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  ),
                                                  SizedBox(
                                                    height: 10,
                                                  ),
                                                  Text(
                                                    "${snapshot.data.phone}",
                                                    style: TextStyle(
                                                      color: Colors.white60,
                                                      fontSize: 18,
                                                      //fontWeight: FontWeight.w300
                                                    ),
                                                  ),
                                                ])
                                          ],
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          children: [
                                            Container(
                                                margin: EdgeInsets.symmetric(
                                                    vertical: 10),
                                                width: size.width * 0.4,
                                                child: ElevatedButton(
                                                  onPressed: () {
                                                    if (_nameController.text ==
                                                            "" &&
                                                        _emailController.text ==
                                                            "" &&
                                                        _adressController
                                                                .text ==
                                                            "") {
                                                      setState(() =>
                                                          isButtonDisabled =
                                                              true);
                                                    } else {
                                                      editUserProfile();
                                                    }
                                                  },
                                                  // editUserProfile();

                                                  child: Text('Enregistrer'),
                                                  style:
                                                      ElevatedButton.styleFrom(
                                                    primary: Colors.transparent,
                                                    shape:
                                                        RoundedRectangleBorder(
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        20),
                                                            side: BorderSide(
                                                                color: Colors
                                                                    .white)),
                                                  ),
                                                )),
                                            SizedBox(
                                              width: 20,
                                            ),
                                          ],
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    height: MediaQuery.of(context).size.height /
                                        1.5,
                                    // padding: EdgeInsets.only(
                                    //   top: 32,
                                    // ),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            Container(
                                              width: size.width * 0.94,
                                              child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                children: [
                                                  Container(
                                                    padding: EdgeInsets.only(
                                                        left: 10,
                                                        right: 10,
                                                        bottom: 20,
                                                        top: 20),
                                                    child: Column(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .start,
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: [
                                                        Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .spaceBetween,
                                                          children: [
                                                            Text(
                                                              'Votre nom :',
                                                              style: TextStyle(
                                                                  color: Color(
                                                                      0xFF4053FCF),
                                                                  fontSize: 16,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w600),
                                                            ),
                                                            IconButton(
                                                                icon: Icon(
                                                                  CommunityMaterialIcons
                                                                      .pencil,
                                                                  color: Colors
                                                                      .grey,
                                                                ),
                                                                onPressed: () {
                                                                  myFocusNode
                                                                      .requestFocus();
                                                                  setState(() {
                                                                    enableup =
                                                                        true;
                                                                  });
                                                                })
                                                          ],
                                                        ),
                                                        TextFormField(
                                                          controller:
                                                              _nameController,
                                                          enabled: enableup,
                                                          focusNode:
                                                              myFocusNode,
                                                          enableInteractiveSelection:
                                                              false,
                                                          keyboardType:
                                                              TextInputType
                                                                  .text,
                                                          decoration: InputDecoration(
                                                              hintText:
                                                                  "${snapshot.data.name}",
                                                              hintStyle: TextStyle(
                                                                  color: Colors
                                                                      .grey,
                                                                  fontSize:
                                                                      14.0)),
                                                        ),


  Future<User> getUser() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    String token = localStorage.getString('access_token');
    // print(token);
    await checkInternet();
    Map<String, String> headers = {
      'Content-type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Bearer $token'
    };
    var url = Uri.parse(ApiUtil.GET_USER);
    var response = await http.get(url, headers: headers);
    switch (response.statusCode) {
      case 200:
        var body = jsonDecode(response.body);
        // print(body);
        User users = User.fromJson(body);
        //   inspect(users);
        //  print(users);

        return users;
        break;
      case 404:
        throw ResourceNotFound('user');
        break;
      case 301:
      case 302:
      case 303:
        throw RedirectionFound();
        break;
      default:
        return null;
        break;
    }
  }

How i can save data locally and reuse it without connect to the server ?

Update :

response from api :

{
    "id": 53,
    "activeboxe_id": 35,
    "username": "hamid hamid",
    "name": "Hamid Ansari",
    "email": "hamid@gmail.com",
    "adress": "Germany",
    "phone": "21625147147",
    "email_verified_at": null,
    "created_at": "2021-04-28T10:52:31.000000Z",
    "updated_at": "2021-05-28T09:35:17.000000Z",
    "role": "user"
}
lucky
  • 185
  • 5
  • 18

2 Answers2

0

You could use a SQLite DB.

Consider the docs.
There you can find an example.

Alex Fischer
  • 193
  • 1
  • 2
  • 12
  • can i use SharedPreferences in this case ?? – lucky May 28 '21 at 13:15
  • Marcel already explained it [here](https://stackoverflow.com/questions/63360041/sqflite-or-shared-preference-which-is-suitable-for-storing-user-data-locally-in) (I hope it helps) – Alex Fischer May 28 '21 at 13:26
0

Consider using Hive or Object_Box. The are no SQL dbs, and they are very fast and performant.

If you are using bloc as your state management, HydratedBloc is also available. Which is what I use personally

mrgnhnt96
  • 3,562
  • 1
  • 17
  • 36
  • i added the response api ... check it – lucky May 28 '21 at 13:24
  • 1
    There are some good tutorials online on how you can cache your data. Here is a list for [Hive](https://www.youtube.com/results?search_query=hive+flutter) and here is a video for [Object_Box](https://www.youtube.com/watch?v=AxYbdriXKI8) – mrgnhnt96 May 28 '21 at 13:29