Navegação Profunda e Navegação por URL
Aprenda a lidar com links profundos e navegação baseada em URL em aplicativos Flutter, para que links externos e a barra de URL da web direcionem os usuários à tela correta.
Navegação Profunda e Navegação por URL é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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.
Perguntas Frequentes
A aula “Navegação Profunda e Navegação por URL” é grátis?
Sim — o texto completo de “Navegação Profunda e Navegação por URL” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.
O que vou aprender em “Navegação Profunda e Navegação por URL”?
Aprenda a lidar com links profundos e navegação baseada em URL em aplicativos Flutter, para que links externos e a barra de URL da web direcionem os usuários à tela correta. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Flutter Mobile Development?
Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Navegação Profunda e Navegação por URL”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Flutter Mobile Development?
Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Navegação básica entre páginas
- Rotas nomeadas e argumentos
- TabBars e menus laterais
- Navegação Profunda e Navegação por URL