Flutter - 有条件地渲染 cookie 对话框答案

【问题标题】：Flutter - Rendering cookies dialog conditionallyFlutter - 有条件地渲染 cookie 对话框
【发布时间】：2022-01-14 19:12:55
【问题描述】：

我是 Flutter 和 Dart 语言的初学者，并试图弄清楚如何在页面加载时有条件地（基于用户偏好）呈现 cookie 设置对话框（弹出）。我已经找到了一些 3rd 方包（sharedpreferences）来存储用户偏好的键值对。我想要做的是检查用户偏好，如果未找到或错误（单击拒绝未给予同意）此弹出窗口将继续出现在所有页面上。我还希望用户能够通过单击链接打开此 cookie 设置弹出窗口。我怎样才能做到这一点？

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: CookiesWidget(),
        ),
      ),
    );
  }
}

class CookiesWidget extends StatelessWidget {
  const CookiesWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: const Text('Cookie Settings'),
          content: const Text('This website uses cookies. Please click OK to accept.'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Deny'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Cookie Settings'),
    );
  }
}

【问题讨论】：

标签： flutter sharedpreferences android-alertdialog flutter-widget flutter-sharedpreference

【解决方案1】：

SharedPrefences + Visibility Widget 将帮助您有条件地隐藏和显示您的 cookie 小部件。
如果您希望用户使用链接在您的应用中打开某些内容，您应该考虑搜索深层链接。

我不能给出具体的解决方案，但可以提供实现最常见情况的资源：

深度链接包：uni_links
一篇文章https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283
关于深度链接的官方 Flutter 指南

【讨论】：

【解决方案2】：

共享偏好应该是最好的选择。

您云使用 FutureBuilder 根据共享首选项的数据呈现（或不呈现）对话框。

你应该在你的类内创建一个 async 函数，但在你的 build() 方法之外：

  Future<bool> cookiesAccepted() async {
    var prefs = await SharedPreferences.getInstance();
    if (prefs.containsKey('cookies')) {
      bool? info = prefs.getBool('cookies');
      return info ?? false;
    }
    return false;
  }

并将这个放入您的build() 方法中。

FutureBuilder<bool>(
        future: cookiesAccepted(),
        builder: (BuildContext context, AsyncSnapshot<bool> response) {
          if (response.hasData) {
            if (!response.data!) { //If the cookies were not accepted
              return Text("Your cookies dialog");
            }
          }
        },
      ),

记得用prefs.setBool('cookies', value);在SharedPreferences中存储数据

【讨论】：