Flutter - Rendering cookies dialog conditionally

Question

I am a beginner in Flutter & Dart language and trying to figure out how to render cookie settings dialog(popup) conditionally(based on user preference) on page load. I already found some 3rd party package (sharedpreferences) to store key-value pair for the user preferences. What I want to do is to check for user preference and if not found or false (Consent not given by clicking on Deny) this popup will just keep appearing on all pages. I also want users to be able to open this cookie settings popup by clicking on a link. How can I achieve that?

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'),
    );
  }
}

score 0 · Answer 1 · answered Jan 14 '22 at 19:35

SharedPrefences + Visibility Widget would help you hide and show your cookie widget conditionally.
If you want users to open something within your app using a link, you should consider searching about deep-links.

I can't give a specific solution but resources to achieve most common cases:

A package for deep-link: uni_links
An article https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283
Official Flutter guide about deep links

score 0 · Answer 2 · answered Jan 14 '22 at 21:43

Shared Preferences should be the best option.

You cloud use a FutureBuilder to render (or not render) the dialog based on the Shared Preferences' data.

You should create an async function inside your class but outside your build() method:

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

And put this inside your build() method.

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");
            }
          }
        },
      ),

Remember to store data inside SharedPreferences with prefs.setBool('cookies', value);

Flutter - Rendering cookies dialog conditionally

2 Answers2