I'm trying to save a value in the shared preferences in flutter then get it. But it's always returning null. The value is being retrieved from an API that is working fine in the backend.
Here is my code:
Method in which i'm getting the data from the api:
List<LastOrder>? lastOrders;
var isLoaded3 = false;
int od_id = 0;
getLastOrderMethod() async {
lastOrders = await RemoteService().getLastOrder(2);
if (lastOrders != null) {
setState(() {
isLoaded = true;
});
return ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
setState(() {
od_id = lastOrders![0].id;
print('getLastOrderMethod: $od_id');
saveIdOrder(od_id);
});
return;
});
}
}
Method in which i'm trying to save the variable value in the shared preferences:
Future<bool> saveIdOrder(value) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
print('save: $od_id');
return await sharedPreferences.setInt('order_id', value);
}
Method in which i'm trying to get the variable value in the shared preferences:
static Future getIdOrder() async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
final x = sharedPreferences.getInt('order_id');
print('get: $x');
return x;
}
#override
void initState() {
// TODO: implement initState
print('intial ${od_id}'); => 0
getIdOrder(); => null
getLastOrderMethod();
super.initState();
}
I'd be glad for any kind of help!
getIdOrder() is a future method, it will take some time to fetch the data. While initState cant be async method, you can use .then and inside it call setState to update the ui. but Using FutureBuilder will be best option.
late final future = getIdOrder();
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: future,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text("${snapshot.data}"); // your widget
}
return CircularProgressIndicator();
},
),
floatingActionButton: FloatingActionButton(onPressed: () {}),
);
}
More about using FutureBuilder
Solved the issue by doing all the logic inside the listView.builder(), then updated the variable value inside a setState()
Related
I have a provider where a method , by this method if I send lat and long it will give me place name.
Future<List<Placemark>> getAndSetAddressFromLatLong(double startLat)async {
List<Placemark> placemarksStart = await placemarkFromCoordinates(startLat,startLong);
return placemarksStart;
}
So, When I'm trying to call and fetch the data in view file like below
#override
Widget build(BuildContext context) {
var data = Provider.of<MapProvider>(context).getAndSetAddressFromLatLong(
widget.history.startLat!.toDouble(),
widget.history.startLong!.toDouble(),
).then((value) => value);
print(data);
I'm getting the output I/flutter (25255): Instance of 'Future<List<Placemark>>' , But In then() if I print value without return I'm getting my desire list.
How I will get List<Placemark> here from Instance of 'Future<List>' ?
Since you're using provider call notifyListeners() after awaiting the results. In the widget use consumer to show the results
List<Placemark> _placemarksStart = [];
List<Placemark> get placemarksStart => [..._placemarksStart];
Future<void> getAndSetAddressFromLatLong(double startLat, double startLong) async {
_placemarksStart = await placemarkFromCoordinates(startLat,startLong);
notifyListeners();
}
Widget, similarly you can achieve loading with a boolean
Consumer<MyType>(
builder: (context, provider, child) {
if (provider.placemarksStart.isEmpty) {
return Center(child: Text('Loading...'),);
}
return ListView.builder(itemBuilder: (context, index) {
final item = provider.placemarksStart[index];
return Text("TODO");
}, itemCount: provider.placemarksStart.length,);
},
),
And call the method getAndSetAddressFromLatLong in the initState
late List<placemark> data;
#override
Widget build(BuildContext context) {
Provider.of<MapProvider>(context).getAndSetAddressFromLatLong(
widget.history.startLat!.toDouble(),
widget.history.startLong!.toDouble(),
).then((value){
data = value;
print(data);
}
);
I have a ListView.builder widget wrapped inside a RefreshIndicator and then a FutureBuilder. Refreshing does not update my list, I have to close the app and open it again but the refresh code does the same as my FutureBuilder.
Please see my code below, when I read it I expect the widget tree to definitely update.
#override
void initState() {
super.initState();
taskListFuture= TaskService().getTasks();
}
#override
Widget build(BuildContext context) {
return Consumer<TaskData>(builder: (context, taskData, child) {
return FutureBuilder(
future: taskListFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
taskData.tasks = (snapshot.data as ApiResponseModel).responseBody;
return RefreshIndicator(
onRefresh: () async {
var responseModel = await TaskService().getTasks();
setState(() {
taskData.tasks = responseModel.responseBody;
});
},
child: ListView.builder(
...
...
Let me know if more code is required, thanks in advance!
Points
I am using a StatefulWidget
Task data is a class that extends ChangeNotifier
When I debug the refresh I can see the new data in the list, but the UI does not update
getTasks()
Future<ApiResponseModel> getTasks() async {
try {
var _sharedPreferences = await SharedPreferences.getInstance();
var userId = _sharedPreferences.getString(PreferencesModel.userId);
var response = await http.get(
Uri.parse("$apiBaseUrl/$_controllerRoute?userId=$userId"),
headers: await authorizeHttpRequest(),
);
var jsonTaskDtos = jsonDecode(response.body);
var taskDtos= List<TaskDto>.from(
jsonTaskDtos.map((jsonTaskDto) => TaskDto.fromJson(jsonTaskDto)));
return ApiResponseModel(
responseBody: taskDtos,
isSuccessStatusCode: isSuccessStatusCode(response.statusCode));
} catch (e) {
return null;
}
}
The issue here seems to be that you are updating a property that is not part of your StatefulWidget state.
setState(() {
taskData.tasks = responseModel.responseBody;
});
That sets a property part of TaskData.
My suggestion is to only use the Consumer and refactor TaskService so it controls a list of TaskData or similar. Something like:
Provider
class TaskService extends ChangeNotifier {
List<TaskData> _data;
load() async {
this.data = await _fetchData();
}
List<TaskData> get data => _data;
set data(List<TaskData> data) {
_data = data;
notifyListeners();
}
}
Widget
class MyTaskList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Consumer<TaskService>(builder: (context, service, child) {
return RefreshIndicator(
onRefresh: () {
service.getTasks();
},
child: ListView.builder(
itemCount: service.data.length,
itemBuilder: (BuildContext context, int index) {
return MyTaskItem(data:service.data[index]);
},
),
);
});
}
}
and make sure to call notifyListeners() in the service.getTasks() method to make the Consumer rebuild
I think (someone will correct me if I'm wrong) the problem is that you are using the FutureBuilder, once it's built, you need to refresh to whole widget for the FutureBuilder to listen to changes. I can suggest a StreamBuilder that listens to any changes provided from the data model/api/any kind of stream of data. Or better yet, you can use some sort of state management like Provider and use Consumer from the Provider package that notifies the widget of any changes that may occurred.
I try to use FutureBuilder in Flutter to wait ulti my initState is finished then buil the UI for the app.
But when the app is running, the screen keep rebuilding each time I press another button (the button does totally different thing).
Future loadUser() async {
String jsonString = await storage.read(key: "jwt");
final jsonResponse = json.decode(jsonString);
loggedUser = new LoggedUser.fromJson(jsonResponse);
print(loggedUser.token);
getProfile();
getJourneyByUserId()
.then((receivedList){
addRanges(receivedList);});
}
Future<List<Journey>>getJourneyByUserId() async {
var res = await http.get(
Uri.parse("$baseUrl/journeys/userid=${loggedUser.user.userId}"),
headers: {
'Content_Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer ${loggedUser.token}',
},
);
if (res.statusCode == 200) {
print("Get journeys successfully");
}
var data = jsonDecode(res.body);
List idList = [];
for (var i in data) {
idList.add(i["journeyId"]);
}
for (var i in idList) {
var res = await http.get(
Uri.parse("$baseUrl/journeys/$i"),
);
var data = jsonDecode(res.body);
Journey userJourney = new Journey.fromJson(data);
setState(() {
journeyList.add(userJourney);
});
}
print("Journey ${journeyList.length}");
return journeyList;
}
addRanges(journeyList){
setState(() {
rangeList=[];
});
if (journeyList.isNotEmpty) {
for (var i in journeyList) {
DateTime startDate =
DateTime(i.startDate.year, i.startDate.month, i.startDate.day);
DateTime endDate =
DateTime(i.endDate.year, i.endDate.month, i.endDate.day);
setState(() {
rangeList.add(PickerDateRange(startDate, endDate));
});
}
}
print("Range ${rangeList.length}");
return rangeList;
}
returnRange() {
List<PickerDateRange> list = [];
for(int i =0; i<rangeList.length;i++){
list.add(rangeList[i]);
}
return list;
}
Future functionForBuilder() async {
return await returnRange();
}
//initState function
#override
void initState() {
super.initState();
loadUser();
functionForBuilder();
}
//build the UI
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("$_name's Profile",style: TextStyle(color: kColorPalette4),),
centerTitle: true,
),
body: Container(
child: FutureBuilder(
future: functionForBuilder(),
builder: (BuildContext context,AsyncSnapshot snapshot){
//here I set the condition for each case of snapshot
}
I have read some documents say that I should assign the functionForBuilder() to a Future variable when initState then use it in the future child of FutureBuilder. Example:
Future _future;
//initState function
#override
void initState() {
super.initState();
loadUser();
_future=functionForBuilder();
}
// then with the FutureBuilder
future: _future
With this way the screen is not rebuild anymore but my function returnRange() seems like not running as my expextation (I called the returnRange() once in the build() function).
Thanks in advance for your answer!
Whenever you assign to the _future variable again, you must do that inside a setState block, otherwise the widget will not rebuild with the new future.
For example:
void updateData() {
setState(() {
_future = functionForBuilder();
});
}
If you use FutureBuilder, it rebuild items again and again.
Try two ways:
Don't use `future: functionForBuilder(), comment it.
Remove FutureBuilder(), simply use Container().
And let me know any issue?
Code:
call your future in the initstate method not in the build as shown in the example.
class MyPage extends StatefulWidget { #override State<MyPage> createState() => _MyPageState(); } class _MyPageState extends State<MyPage> { // Declare a variable. late final Future<int> _future; #override void initState() { super.initState(); _future = _calculate(); // Assign your Future to it. } // This is your actual Future. Future<int> _calculate() => Future.delayed(Duration(seconds: 3), () => 42); #override Widget build(BuildContext context) { return Scaffold( body: FutureBuilder<int>( future: _future, // Use your variable here (not the actual Future) builder: (_, snapshot) { if (snapshot.hasData) return Text('Value = ${snapshot.data!}'); return Text('Loading...'); }, ), ); } }
I have two asynchronous functions, one returns a popup, the other makes a permission request. I call them in the init method. But they are called simultaneously, i.e. the first window appears and immediately the second. How do I fix this?
class _MyAppState extends State<MyApp> {
final keyIsFirstLoaded = 'is_first_loaded';
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) async {
final context = MyApp.navKey.currentState.overlay.context;
await showDialogIfFirstLoaded(context);
await initPlatformState();
});
}
showDialogIfFirstLoaded(BuildContext context, prefs) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
bool isFirstLoaded = prefs.getBool(keyIsFirstLoaded);
if (isFirstLoaded == null) {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return new AlertDialog(
// title: new Text("title"),
content: new Text("//"),
actions: <Widget>[
new FlatButton(
child: new Text(".."),
onPressed: () {
Navigator.of(context).pop();
prefs.setBool(keyIsFirstLoaded, false);
},
),
],
);
},
);
}
}
initPlatformState() async {
print('Initializing...');
await BackgroundLocator.initialize();
print('Initialization done');
final _isRunning = await BackgroundLocator.isRegisterLocationUpdate();
setState(() {
isRunning = _isRunning;
});
onStart();
print('Running ${isRunning.toString()}');
}
add return to showDialog statement, you're not returning a Future so await isn't doing anything
Personal advice: always specify return types, cause if you don't, you get dynamic return type. If you do specify it, the IDE/dart analysis server will help you with problems such as this one.
I want to initialize'LikesList' by calling the init function I implemented in initstate and render the related widgets accordingly. However, when it is actually executed, LikesList cannot be initialized, and, curiously, once hot reload is performed, LikesList is initialized. How do I get LikesList to be initialized normally when I first run it as I want?
List<String> LikesList = [];
int ListIndex = 0;
Future<List<String>> init() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
LikesList = await prefs.getStringList('LikesList');
ListIndex = await LikesList.length;
print("${LikesList}");
}
#override
void initState() {
// TODO: implement initState
// Future.delayed(Duration(milliseconds: 100)).then((_) {
// init();
// });
Timer.run(() {
init();//This is the function I implemented.
});
super.initState();
print("++++++++${LikesList}");
}
As #whatamelon suggested you can use FutureBuilder to serve the purpose.
Future<List<String>> init() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getStringList('LikesList');
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: init(),
builder: (ctx, snapshot) {
if(snapshot.hasData) {
print(snapshot.data);
return Text("${snapshot.data}");
}
else
return Text("loading");
}
);
}
How about using Future method?
Using Future and Future builder makes you can get data in initialized state.