image - 有没有办法在喜欢按钮上使用共享首选项

Question

我有一个最喜欢的图像按钮，点击它会变成红色，但它不会存储它，当我重新打开它时，它就不喜欢了。所以我想知道我们是否可以为其提供共享偏好以存储喜欢的按钮。有谁知道如何做到这一点？

the complete code-
class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}
class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool liked = false;
  _pressed() {
    setState(()  {
      liked = !liked;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: IconButton(
            icon: Icon(liked ?Icons.favorite: Icons.favorite_border,
                color: liked ? Colors.red :Colors.grey ),
            onPressed: () => _pressed(),
          ),
        ),
      ],
    );
  }
}

Answer 1

您可以使用 shared_preferences插件来保存最喜欢的按钮是否被按下，然后在 Widget 初始化时恢复保存的值。

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  static const likedKey = 'liked_key';

  bool liked;

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

  void _restorePersistedPreference() async {
    var preferences = await SharedPreferences.getInstance();
    var liked = preferences.getBool(likedKey) ?? false;
    setState(() => this.liked = liked);
  }

  void _persistPreference() async {
    setState(() => liked = !liked);
    var preferences = await SharedPreferences.getInstance();
    preferences.setBool(likedKey, liked);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: liked == null
          ? Center(child: CircularProgressIndicator())
          : Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  child: IconButton(
                    icon: Icon(
                      liked ? Icons.favorite : Icons.favorite_border,
                      color: liked ? Colors.red : Colors.grey,
                    ),
                    onPressed: _persistPreference,
                  ),
                ),
              ],
            ),
    );
  }
}