CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
Soundhar Raj
Soundhar Raj

Reputation: 177

Flutter set state not updating the UI value

I have two screens.

  1. Subscription page
  2. Currency List

Subscription Page This page has 3 plans. Free, Medium and Pro. and I showing prices for each plan.

Currency Page This page you can choose your currency. USD, EUR, CHF etc.,

My issue is, when i change the currency in the currency page and come back to subscription page. the state value is not updating.

Future<dynamic> loadSubscriptionAsset() async {
  var response = await http.get(
      Uri.encodeFull('http://localhost.com/api/subscription'),
      headers: {
        "Accept": "application/json"
      }
  );

  return response.body;
}
    
// State Variables 
  var subscriptionData;
  var freePrice = '0.00';
  var mediumPrice = '0.00';
  var premiumPrice = '0.00';
  final LocalStorage storage = new LocalStorage('currentCurrencyState');
  final LocalStorage priceStorage = new LocalStorage('priceInfoState');

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

    setPrice();
            
  }

  setPrice(){        
    setState(() {
      loadSubscriptionAsset().then((value) {
        print('set');
        print(DateTime.now());
        value = jsonDecode(value);
        subscriptionData = value;
        if(storage.getItem('currentCurrency')==''){
          var defaultCurrency = subscriptionData['currency']['usd']['id'];
          var prices = subscriptionData['price'];
          freePrice = prices["1"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          mediumPrice = prices["2"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          premiumPrice = prices["3"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          priceStorage.setItem('freePrice',freePrice);
          print('free price '+freePrice);
        }
        else{
          var defaultCurrency = storage.getItem('currentCurrency');
          var prices = subscriptionData['price'];
          freePrice = prices["1"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          mediumPrice = prices["2"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          premiumPrice = prices["3"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
          priceStorage.setItem('freePrice',freePrice);
          print('free price '+freePrice);
        }
      });
    });
  }


@override
  Widget build(BuildContext context) {

    setPrice();

    return WillPopScope(..

so, what is the problem is print('free price '+freePrice); this line printing the values when i navigate between subscription page and currency page. but in the app UI the state value is not updating.

Example: Medium plan USD - 10 Medium plan EUR - 15

in this case. when i switch the currency from USD to EUR. in my code its working fine, i can see the value in the print but app screen not updated. it still remains in USD currency.

enter image description here

enter image description here

The values are changing when i switch between the tabs or click on the app screen. until its not updating the view.

I forgot to mention one issue. That is. you can see the $ icon in the app screen. if you click on that it will goto the currency list image. Once you change the currency and back to subscription page. the initState is not calling. So currency is not updated. I don't know how to fix this, so i calling the setPrice() function inside the

@override
  Widget build(BuildContext context) {

    setPrice();

    return WillPopScope(

Upvotes: 1

Views: 731

Answers (1)

osaxma
osaxma

Reputation: 2974

Since loadSubscriptionAsset is asynchronous, setState is called before that function is complete in your code. Instead, you need to call it after the function is completed. You can chain .then or just put state after the future completes like this:

setPrice(){    
    loadSubscriptionAsset().then((value) {
    setState(() {
        print('set');
        print(DateTime.now());
        value = jsonDecode(value);
        subscriptionData = value;
        if(storage.getItem('currentCurrency')==''){
            var defaultCurrency = subscriptionData['currency']['usd']['id'];
            var prices = subscriptionData['price'];
            freePrice = prices["1"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            mediumPrice = prices["2"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            premiumPrice = prices["3"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            priceStorage.setItem('freePrice',freePrice);
            print('free price '+freePrice);
        }
        else{
            var defaultCurrency = storage.getItem('currentCurrency');
            var prices = subscriptionData['price'];
            freePrice = prices["1"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            mediumPrice = prices["2"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            premiumPrice = prices["3"][defaultCurrency.toString()].toString()+' '+subscriptionData['currency']['usd']['code'].toString();
            priceStorage.setItem('freePrice',freePrice);
            print('free price '+freePrice);
        }
        });    
    });
    
  }

Upvotes: 2

Related Questions