How to Refresh the UI in ListView.Builder using flutter GetX when data is changed?
Solution 1
After updating manually your list, do:
this._goalsList.refresh()
After that your UI will be updated
Solution 2
Just Wrap the ListView.builder list with Obx or Getx. For widgets that are not in the list, you can wrap them individually with obx or getx.
Example:
Obx(() => ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: item.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Card()...
},
),
),
Solution 3
Obs Getx variables are only observed within an Obx or Getx as stated above. You need to wrap them up. Just be careful not to use Obx / Getx when there are no variables observed inside, as it will generate an error.
Solution 4
This answer is for @mjablecnik's comment:
class Other extends StatelessWidget {
final Counter c = Get.find();
final _chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
final Random _rnd = Random();
/* ---------------------------------------------------------------------------- */
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Obx(() => ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10),
itemCount: c.testList.length,
itemBuilder: (context, index) => Card(
color: Colors.amber[600],
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Text('${c.testList[index]}'),
),
),
),
)),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => c.addToList(getRandomString(15)),
),
);
}
/* ---------------------------------------------------------------------------- */
// source: https://stackoverflow.com/questions/61919395/how-to-generate-random-string-in-dart
String getRandomString(int length) => String.fromCharCodes(Iterable.generate(
length, (_) => _chars.codeUnitAt(_rnd.nextInt(_chars.length))
)
);
}
Update 1:
Another little change I did was for the controller:
class Counter extends GetxController {
var count = 0.obs;
var testList = <String>['test1', 'test2'].obs;
/* ---------------------------------------------------------------------------- */
void incremenent() => count++;
/* ---------------------------------------------------------------------------- */
void addToList(String item) {
print('adding: $item');
testList.add(item);
}
}
Comments
-
J.Maher almost 2 years
I'm refactoring my app to GetX state management for less boilerplate code. I make the Controller and the API provider (code below). But when I want to refresh the data (Manually too) it won't change.
home_page.dart
class HomeUI extends GetView<HomeController> { ... GetX<HomeController>( initState: (state) => Get.find<HomeController>().getAll(), builder: (_) { return _.goalList.length < 1 || _.goalList == null ? Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator(), Text('0 goals found, please wait', style: Theme.of(context) .textTheme .headline6 .copyWith( color: kTextColor)) ], )) : ListView.builder( itemBuilder: (context, index) { GoalModel goalModel = GoalModel.fromMap( _.goalList[index]); return ListTile( title: Text(goalModel.text), subtitle: Text(goalModel.updated_at), ); }); }
home_controller.dart
class HomeUI extends GetView<HomeController> { ... class HomeController extends GetxController { final MyRepository repository = MyRepository(); final _goalsList = RxList(); get goalList => this._goalsList.value; set goalList(value) => this._goalsList.value = value; getAll() { repository.getAll().then((data) { this.goalList = data; update(); }); } delete(id) { repository.delete(id).then((message) { this.goalList; return message; }); } add(goal) { repository.add(goal).then((data) { this.goalList = data; }); } edit(editedItem, text, achievementDate) { repository.edit(editedItem, text, achievementDate).then((data) { this.goalList = data; }); } }
goals_repository.dart
class MyRepository { final MyApiClient apiClient = MyApiClient(); getAll() { return apiClient.getAll(); } delete(id) { return apiClient.deleteGoal(id); } edit(editedItem, text, achievementDate) { return apiClient.updateGoal(editedItem, text, achievementDate); } add(goal) { return apiClient.postGoal(goal); } }
api.dart (getAll() method)
getAll() async { try { var _token = await _sharedPrefsHelper.getTokenValue(); var response = await httpClient.get(baseUrl, headers: { 'Authorization': 'Bearer $_token', }); if (response.statusCode == 200) { print('json decode response is: ${json.decode(response.body)}'); return json.decode(response.body); } else print('erro -get'); } catch (error) { print(error); } }
I followed this article to make the implementation: getx_pattern