Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter-web: Provider loss of state when browser refresh

so I'm wondering why does the provider loses state on browser refresh. Doesn't it suppose to keep state after refreshing/reloading?

Would Really appreciate the Help

default project for flutter

home: ChangeNotifierProvider<Counter>(
      create: (_) => Counter(),
      child: MyHomePage(title: 'Flutter Demo Home Page')),



 class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({this.title});

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many 
               times:',
            ),
            Text(
              '${counter.value}',
              style: 
             Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

Here's the Provider Class

import 'package:flutter/foundation.dart';

    class Counter with ChangeNotifier {
      
      int value=0;
      void increment() {
        
        value++;
        notifyListeners();
      }
    }
like image 800
Dean Villamia Avatar asked Apr 15 '20 15:04

Dean Villamia


People also ask

Does flutter web support hot reload?

Flutter web currently supports hot restart but not hot reload. A code change has a visible effect only if the modified Dart code is run again after the change. Specifically, a hot reload causes all the existing widgets to rebuild.

How do you refresh a page on flutter Web?

You can either use the browser's refresh button, or you can enter “R” in the console where “flutter run -d chrome” is running.

Is flutter for Web stable?

In addition, to replace JavaScript, Flutter uses Dart. And now, Flutter for the web has been released and is stable. This is wonderful news for web designers, who can now construct highly secure and appealing websites, in addition to being able to publish Flutter mobile apps to the web using the same codebase.


1 Answers

you can use cookies or keeping track of states and other information. I found this code and works even when refreshing.

import 'package:universal_html/html.dart' as html;

class CookieManager {

  static addToCookie(String key, String value) {
     // 2592000 sec = 30 days.
     html.document.cookie = "$key=$value; max-age=2592000; path=/;";
  }

  static String getCookie(String key) {

    String cookies = html.document.cookie;
    List<String> listValues = cookies.isNotEmpty ? cookies.split(";") : List();
    String matchVal = "";
    for (int i = 0; i < listValues.length; i++) {
      List<String> map = listValues[i].split("=");
      String _key = map[0].trim();
      String _val = map[1].trim();
      if (key == _key) {
        matchVal = _val;
        break;
      }
    }
    return matchVal;
  }
}
like image 52
carlosx2 Avatar answered Oct 01 '22 11:10

carlosx2