Deep linking y navegación mediante URL
Aprenda a gestionar deep links y la navegación basada en URL en aplicaciones Flutter para que los enlaces externos y la barra de URL web dirijan a los usuarios a la pantalla adecuada.
Deep linking y navegación mediante URL es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Why Deep Linking Matters
Deep linking lets an external source — an email, a notification, or a browser URL — open a specific screen inside your app instead of the home page.
- Improves user experience for shared content
- Essential for marketing campaigns and notifications
- On Flutter web, it ties your app to the browser URL bar
You will use a URL-based router to make this work cleanly.
Two Kinds of Deep Links
There are two common forms:
- Custom scheme links like
myapp://product/42 - Universal / App Links using real
https://URLs
Universal links are preferred because they fall back to a website if the app is not installed.
Meet the Router API
Flutter's Router API (Navigator 2.0) maps URLs to screens. Packages like go_router wrap it in a friendly declarative API.
You define routes with path patterns, and the router parses incoming URLs for you.
final router = GoRouter(
routes: [
GoRoute(path: '/', builder: (c, s) => HomeScreen()),
GoRoute(path: '/product/:id', builder: (c, s) => ProductScreen(s.pathParameters['id']!)),
],
);Path Parameters
The :id segment is a path parameter. When a user opens /product/42, you read it with state.pathParameters['id'].
This is how a deep link carries data into your screen.
GoRoute(
path: '/product/:id',
builder: (context, state) {
final id = state.pathParameters['id'];
return ProductScreen(productId: id!);
},
);Query Parameters
For optional values use query parameters: /search?q=phones&sort=price.
Read them via state.uri.queryParameters.
GoRoute(
path: '/search',
builder: (context, state) {
final q = state.uri.queryParameters['q'] ?? '';
return SearchScreen(query: q);
},
);Wiring the Router In
Use MaterialApp.router instead of MaterialApp so the app delegates navigation to the router.
MaterialApp.router(
routerConfig: router,
title: 'My App',
);Navigating Programmatically
You can still navigate from code with context.go() (replace stack) or context.push() (add to stack).
ElevatedButton(
onPressed: () => context.go('/product/42'),
child: const Text('Open product'),
);Android Configuration
For real https App Links on Android, add an intent-filter with autoVerify to AndroidManifest.xml and host an assetlinks.json file on your domain.
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="myapp.com" />
</intent-filter>iOS Configuration
On iOS, configure Associated Domains in Xcode with applinks:myapp.com and host an apple-app-site-association file at your domain root.
<!-- Associated Domains entitlement -->
applinks:myapp.comHandling Unknown Routes
Always provide an errorBuilder so a bad or unknown deep link shows a friendly 404 screen instead of crashing.
GoRouter(
routes: [...],
errorBuilder: (context, state) => const NotFoundScreen(),
);Redirects & Guards
Use the redirect callback to guard routes — for example send unauthenticated users from /profile to /login.
GoRouter(
redirect: (context, state) {
final loggedIn = auth.isLoggedIn;
if (!loggedIn && state.uri.path == '/profile') return '/login';
return null;
},
routes: [...],
);Quick Check
How do you read the value of id from a deep link matching /product/:id?
Recap
You learned how to add deep linking and URL navigation to a Flutter app:
- Custom scheme vs universal/App Links
- Path and query parameters with the Router API
- Native config on Android and iOS
- Error handling and route guards
Now external links and the browser URL bar can drive your app's navigation.
Aprende Dart con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 88
Preguntas frecuentes
¿La lección «Deep linking y navegación mediante URL» es gratis?
Sí — el texto completo de «Deep linking y navegación mediante URL» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.
¿Qué aprenderé en «Deep linking y navegación mediante URL»?
Aprenda a gestionar deep links y la navegación basada en URL en aplicaciones Flutter para que los enlaces externos y la barra de URL web dirijan a los usuarios a la pantalla adecuada. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Flutter Mobile Development?
No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Deep linking y navegación mediante URL»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?
Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Navegación básica entre páginas
- Rutas con nombre y argumentos
- TabBars y Drawers
- Deep linking y navegación mediante URL