Create a terms of use acceptance widget with Flutter

Tiempo de lectura: 2 minutos

Today we are going to learn how to create a Widget that allows us to accept the terms of use of the system before registering on the platform.

The first thing we are going to do is create this widget, which we will call condiciones_uso.dart

import 'package:flutter/material.dart';

class CondicionesUso extends StatefulWidget {
  CondicionesUso ({Key? key}) : super(key: key);

  final GlobalKey<_CondicionesUsoState> key =
      GlobalKey<_CondicionesUsoState>();

  @override
  _CondicionesUsoState createState() => _CondicionesUsoState();

  bool getPoliticaAceptada() {
    return key.currentState!.isChecked;
  }
}

class _CondicionesUsoState extends State<CondicionesUso> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 20),
          child: Checkbox(
            value: isChecked,
            onChanged: (value) {
              setState(() {
                isChecked = value!;
              });
            },
          ),
        ),

      // Link to open the terms of use on a website
        InkWell(
          onTap: () {
            launch('URL_PRIVACY_POLICY');
          },
          child: Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(bottom: 20),
            child: Text(
              "Accept the terms and conditions",
              style: TextStyle(
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

To use this code, we need to add this library:

dependencies:
  url_launcher: ^6.0.6

What we do with this Widget is:

1. We save the state of the checkbox as checked or not checked.
2. We can obtain the checked state using the function getPoliticaAceptada()
3. We also add a link for the user to check the privacy policy.
4. Remember to change the content of URL_PRIVACY_POLICY with the URL where you have the privacy policy of your service.

To use this Widget, do the following:

Go to the screen where you want to use it:

// First, import it
import 'condiciones_uso.dart';

...
// Instantiate it
CondicionesUso condicionesUsoWidget = CondicionesUso();

// To add it to the view, do this:
 Column(
  children: <Widget>[
  condicionesUsoWidget,
  ],
),

// To check its state, before sending the user registration request, do the following:

if (!condicionesUsoWidget.getPoliticaAceptada()) {
  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(
          'Error, please accept the terms and conditions.')));
  return;

With this code (explained in the comments), we can use this widget.

To get the value of whether it has been clicked or not, use this line:

condicionesUsoWidget.getPoliticaAceptada()