Flutter Mobile Development · درس

الربط العميق والتنقل عبر URL

تعلّم كيفية التعامل مع الروابط العميقة والتنقل القائم على URL في تطبيقات Flutter، حتى تتمكن الروابط الخارجية وشريط URL في الويب من توجيه المستخدمين إلى الشاشة المناسبة.

الربط العميق والتنقل عبر URL درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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

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

الأسئلة الشائعة

هل درس «الربط العميق والتنقل عبر URL» مجاني؟

نعم — نص درس «الربط العميق والتنقل عبر URL» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «الربط العميق والتنقل عبر URL»؟

تعلّم كيفية التعامل مع الروابط العميقة والتنقل القائم على URL في تطبيقات Flutter، حتى تتمكن الروابط الخارجية وشريط URL في الويب من توجيه المستخدمين إلى الشاشة المناسبة. تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الربط العميق والتنقل عبر URL»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Flutter Mobile Development