DOCUMENTO TÉCNICO

Custom Tabs
Flutter
Historial

Fecha Versión Cambios Responsable

2023/08 1.0 Versión Inicial Mercado Pago Team

Información General
Acerca del Documento

En el desarrollo de aplicaciones móviles con Flutter, a menudo surge la

necesidad de mostrar contenido web dentro de la aplicación. Para lograr esto, existen
varias opciones, entre las cuales se destacan el uso de Custom Tabs y Safari View
Controller. Estas tecnologías permiten abrir páginas web en un navegador nativo
integrado en la aplicación, brindando una experiencia de navegación más fluida y
coherente para los usuarios.

En este documento, exploramos cómo implementar Custom Tabs y Safari View

Controller en una aplicación de Flutter utilizando flutter_custom_tabs. Cubriremos la
instalación de las bibliotecas necesarias, la configuración de las dependencias, y
proporcionaremos ejemplos prácticos de cómo abrir páginas web utilizando Custom
Tabs.

Esperamos que esta documentación te brinde una guía clara y concisa sobre
la implementación de Custom Tabs y Safari View Controller en una aplicación de
Flutter, y que puedas aprovechar al máximo estas herramientas para mejorar la
experiencia de navegación web en tu aplicación. ¡Comencemos!
Primeros Pasos
En esta primera parte vamos a ver cómo podemos instalar y configurar las
dependencias necesarias para implementar Custom Tabs y Safari View Controller
según en Flutter.

Instalación
Añada flutter_custom_tabs a las dependencias de su pubspec.yaml.

pubspec.yaml

dependencies:
flutter_custom_tabs: ^1.0.4

Requerimientos
Agregar Android Gradle Plugin 4.1 o superior

// your-project/android/build.gradle
buildscript {
dependencies {
- classpath 'com.android.tools.build:gradle:3.x.x'
+ classpath 'com.android.tools.build:gradle:4.1.0' // or higher
}
}

Nota:

También es posible personalizar el look & feel especificando opciones para cada
Plataforma.
Android: CustomTabsOption
iOS: SafariViewControllerOption

Revisa la documentación oficial aquí.

Ejemplo

JavaScript
import 'package:flutter/material.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: TextButton(
child: const Text('Show Flutter homepage'),
onPressed: () => _launchURL(context),
),
),
),
);
}

void _launchURL(BuildContext context) async {

try {
await launch(
'https://flutter.dev',
customTabsOption: CustomTabsOption(
toolbarColor: Theme.of(context).primaryColor,
enableDefaultShare: true,
enableUrlBarHiding: true,
showPageTitle: true,
animation: CustomTabsAnimation.slideIn(),
// or user defined animation.
animation: const CustomTabsAnimation(
startEnter: 'slide_up',
startExit: 'android:anim/fade_out',
endEnter: 'android:anim/fade_in',
endExit: 'slide_down',
),
extraCustomTabs: const <String>[
// ref. https://play.google.com/store/apps/details?id=org.mozilla.firefox
'org.mozilla.firefox',
// ref. https://play.google.com/store/apps/details?id=com.microsoft.emmx
'com.microsoft.emmx',
],
),
safariVCOption: SafariViewControllerOption(
preferredBarTintColor: Theme.of(context).primaryColor,
preferredControlTintColor: Colors.white,
barCollapsingEnabled: true,
entersReaderIfAvailable: false,
dismissButtonStyle: SafariViewControllerDismissButtonStyle.close,
),
);
} catch (e) {
// An exception is thrown if browser app is not installed on Android device.
debugPrint(e.toString());
}
}
}
Deep Links: Cómo volver a tu App
Los Deep Links, también conocidos como enlaces profundos, son una forma
poderosa de permitir la navegación directa a pantallas o secciones específicas de
una aplicación móvil. En Flutter, configurar correctamente los Deep Links es esencial
para garantizar una experiencia de usuario fluida y sin problemas.

En esta sección de la documentación, nos centraremos en la configuración de

los Deep Links en una aplicación de Flutter basados en la documentación oficial.

Con la configuración adecuada de los Deep Links en Flutter, podrás ofrecer a

los usuarios la capacidad de acceder directamente a contenido específico en tu
aplicación, mejorando la navegación y la experiencia general del usuario.

Como crear un Deep Link

Desde nuestro checkout es posible configurar Deep Links para volver a tu

aplicación ya sea haciendo click en un link de “Volver” o de forma automática al
terminar todo un flujo de pago exitoso para luego ser redirigido a tu App.

Para esto debemos agregar en la creación de la preferencia de pago las

propiedades back_urls y auto_rerturn según corresponda.

Las back_urls contienen los Deep Links para redirigir a nuestra aplicación, se
componen de un scheme seguido del path a donde queremos redirigir al usuario

La propiedad auto_return es opcional y es utilizada si queremos ser redirigidos

automáticamente al Deep Link al terminar exitosamente un flujo de pago.
Configuración de la aplicación para la gestión del Deep Link

Flutter admite deep linking en iOS, Android y navegadores web. Al abrir una
URL se muestra esa pantalla en tu app. Con los siguientes pasos, puedes lanzar y
mostrar rutas utilizando rutas con nombre (ya sea con el parámetro routes o con
onGenerateRoute), o utilizando el widget Router.

Nota:

Las rutas con nombre ya no se recomiendan para la mayoría de las aplicaciones.

Para obtener más información, consulta Limitaciones en la página de descripción
general de la navegación.

Si se ejecuta la aplicación en un navegador web, no es necesaria ninguna

configuración adicional. Las rutas se gestionan del mismo modo que un enlace
profundo de iOS o Android. Por defecto, las aplicaciones web leen la ruta del enlace
profundo a partir del fragmento de url utilizando el patrón: /#/path/to/app/screen,
pero esto puede cambiarse configurando la estrategia de URL para tu app.

Para continuar te invitamos a que puedas revisar los siguientes enlaces

donde se detalla más acerca de los deep links en Flutter.

DeepLinks para aplicaciones Flutter

Configurar App Link para Android
Configurar Universal Link IOS