Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Pautan Dalam dan Navigasi URL

Pelajari cara mengendalikan pautan dalam dan navigasi berasaskan URL dalam aplikasi Flutter supaya pautan luaran dan bar URL web boleh membawa pengguna ke skrin yang tepat.

Pelajaran 4 daripada 413 langkah

Pautan Dalam dan Navigasi URL ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Mengapakah Pautan Mendalam Penting

Pautan mendalam membolehkan sumber luaran — e-mel, pemberitahuan atau URL pelayar — membuka skrin tertentu dalam aplikasi anda dan bukannya halaman utama.

Meningkatkan pengalaman pengguna untuk kandungan yang dikongsi
Penting untuk kempen pemasaran dan pemberitahuan
Dalam Flutter web, ia menghubungkan aplikasi anda dengan bar URL pelayar

Anda akan menggunakan penghala berasaskan URL untuk melaksanakan perkara ini dengan kemas.

Dua Jenis Pautan Mendalam

Terdapat dua bentuk yang lazim:

Pautan skema tersuai seperti myapp://product/42
Pautan Universal / Pautan Aplikasi menggunakan URL https:// sebenar

Pautan universal lebih disukai kerana pautan ini beralih kepada laman web jika aplikasi tidak dipasang.

Kenali API Penghala

API Router Flutter (Navigator 2.0) memetakan URL kepada skrin. Pakej seperti go_router membalutnya dalam API deklaratif yang mudah digunakan.

Anda mentakrifkan laluan dengan corak laluan, dan penghala menghuraikan URL masuk untuk anda.

final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (c, s) => HomeScreen()),
    GoRoute(path: '/product/:id', builder: (c, s) => ProductScreen(s.pathParameters['id']!)),
  ],
);

Parameter Laluan

Segmen :id ialah parameter laluan. Apabila pengguna membuka /product/42, anda membacanya dengan state.pathParameters['id'].

Beginilah cara pautan mendalam membawa data ke dalam skrin anda.

GoRoute(
  path: '/product/:id',
  builder: (context, state) {
    final id = state.pathParameters['id'];
    return ProductScreen(productId: id!);
  },
);

Parameter Pertanyaan

Untuk nilai pilihan, gunakan parameter pertanyaan: /search?q=phones&sort=price.

Bacanya melalui state.uri.queryParameters.

GoRoute(
  path: '/search',
  builder: (context, state) {
    final q = state.uri.queryParameters['q'] ?? '';
    return SearchScreen(query: q);
  },
);

Menyambungkan Penghala

Gunakan MaterialApp.router dan bukannya MaterialApp supaya aplikasi menyerahkan navigasi kepada penghala.

MaterialApp.router(
  routerConfig: router,
  title: 'My App',
);

Menavigasi Secara Programatik

Anda masih boleh menavigasi daripada kod dengan context.go() (menggantikan tindanan) atau context.push() (menambah pada tindanan).

ElevatedButton(
  onPressed: () => context.go('/product/42'),
  child: const Text('Open product'),
);

Konfigurasi Android

Untuk Pautan Aplikasi https sebenar pada Android, tambahkan intent-filter dengan autoVerify pada AndroidManifest.xml dan hoskan fail assetlinks.json pada domain anda.

<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>

Konfigurasi iOS

Pada iOS, konfigurasikan Associated Domains dalam Xcode dengan applinks:myapp.com dan hoskan fail apple-app-site-association pada akar domain anda.

<!-- Associated Domains entitlement -->
applinks:myapp.com

Mengendalikan Laluan Tidak Dikenali

Sentiasa sediakan errorBuilder supaya pautan mendalam yang salah atau tidak dikenali memaparkan skrin 404 yang mesra pengguna dan bukannya menyebabkan aplikasi ranap.

GoRouter(
  routes: [...],
  errorBuilder: (context, state) => const NotFoundScreen(),
);

Pengalihan dan Pengawal

Gunakan panggilan balik redirect untuk mengawal laluan — contohnya, hantar pengguna yang belum disahkan dari /profile ke /login.

GoRouter(
  redirect: (context, state) {
    final loggedIn = auth.isLoggedIn;
    if (!loggedIn && state.uri.path == '/profile') return '/login';
    return null;
  },
  routes: [...],
);

Semakan Pantas

Bagaimanakah anda membaca nilai id daripada pautan mendalam yang sepadan dengan /product/:id?

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari cara menambahkan pautan mendalam dan navigasi URL pada aplikasi Flutter:

Skema tersuai berbanding Pautan Universal/Pautan Aplikasi
Parameter laluan dan pertanyaan dengan API Router
Konfigurasi natif pada Android dan iOS
Pengendalian ralat dan pengawal laluan

Kini pautan luaran dan bar URL pelayar boleh mengawal navigasi aplikasi anda.

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pautan Dalam dan Navigasi URL” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Pautan Dalam dan Navigasi URL”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pautan Dalam dan Navigasi URL”?

Pelajari cara mengendalikan pautan dalam dan navigasi berasaskan URL dalam aplikasi Flutter supaya pautan luaran dan bar URL web boleh membawa pengguna ke skrin yang tepat. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pautan Dalam dan Navigasi URL” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter