Crear un widget de aceptar condiciones de uso con Flutter

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos crear un Widget que nos permita aceptar las condiciones de uso del sistema antes de registrarnos en la plataforma.

Lo primero que vamos a hacer es crear este widget que llamaremos 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<AceptarPolitica> {
  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!;
              });
            },
          ),
        ),

      // Enlace para abrir las condiciones de uso en una web
        InkWell(
          onTap: () {
            launch('URL_POLITICA_PRIVACIDAD');
          },
          child: Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(bottom: 20),
            child: Text(
              "Aceptar los términos y condiciones",
              style: TextStyle(
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
            ),
          ),
        ),

      ],
    );
  }
}

Para poder utilizar este código necesitamos añadir esta librería:

dependencies:
  url_launcher: ^6.0.6

Lo que hacemos con este Widget es:

1. Guardamos el estado del checkbox en checked o no checked.
2. Podemos obtener el estado de checked con la función getPoliticaAceptada()
3. Además añadimos un link para que el usuario pueda comprobar la política de privacidad.
4. Recuerda cambiar el contenido de URL_POLITICA_PRIVACIDAD por la URL donde tengas la política de privacidad de tu servicio.

Para utilizar este Widget haremos lo siguiente:

Vamos a al screen dónde queremos utilizarlo:

//Primero lo importamos
import 'condiciones_uso.dart';

...
//Lo instanciamos
AceptarPolitica aceptarPoliticaWidget = AceptarPolitica();

//Para agrearlo a la vista hacemos esto:
 Column(
  children: <Widget>[
  aceptarPoliticaWidget,
  ],
),

//Para comprobar su estado, antes de enviar la petición de registro de usuario hacemos lo sigiente:

    if (!aceptarPoliticaWidget.getPoliticaAceptada()) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(
              'Error, por favor, acepte los términos y condiciones de uso.')));
      return;
    }

Con este código (que explico en los comentarios) podemos utilizar este widget.

Para obtener el valor de si ha pulsado o no, usamos esta línea:

aceptarPoliticaWidget.getPoliticaAceptada()