Tautan Mendalam dan Navigasi URL
Pelajari cara menangani tautan mendalam dan navigasi berbasis URL dalam aplikasi Flutter agar tautan eksternal dan bilah URL web dapat mengarahkan pengguna ke layar yang tepat.
Tautan Mendalam dan Navigasi URL adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar Dart dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tautan Mendalam dan Navigasi URL” gratis?
Ya — teks lengkap “Tautan Mendalam dan Navigasi URL” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tautan Mendalam dan Navigasi URL”?
Pelajari cara menangani tautan mendalam dan navigasi berbasis URL dalam aplikasi Flutter agar tautan eksternal dan bilah URL web dapat mengarahkan pengguna ke layar yang tepat. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Tautan Mendalam dan Navigasi URL” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Navigasi Halaman Dasar
- Rute Bernama dan Argumen
- TabBars dan Drawer
- Tautan Mendalam dan Navigasi URL